css3瀑布流的实现

这篇介绍一下关于css3实现的瀑布流

css部分

<style>
	*{
		margin:0;
		padding:0;
	}
	#main{
		-webkit-column-width:42%;
		column-width: 42%;
		-webkit-column-count:2;
		column-count:2;
		column-gap:5%;
		padding:4.5%;
	}
	.pic{
		border:1px solid #ddd;
		padding:10px;
		border-radius: 5%;
		margin-bottom: 20px;
		-webkit-column-break-inside:avoid; //避免在元素内部断行并产生新列
		break-inside:avoid;
	}
	.pic img{
		width: 100%;
	}
</style>

html部分

<div id="main">
	<div class="pic">
		<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1494624936,3877802643&fm=26&gp=0.jpg" alt="">
	</div>
	<div class="pic">
		<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3511243883,1584271914&fm=26&gp=0.jpg">
	</div>
	<div class="pic">
		<img src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=427521938,3722192058&fm=111&gp=0.jpg" alt="">
	</div>
	<div class="pic">
		<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3777291312,1522321691&fm=26&gp=0.jpg" alt="">
	</div>
	<div class="pic">
		<img src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1537769626,3511701130&fm=111&gp=0.jpg" alt="">
	</div>
  </div>

那么效果就出来了呀，对没有js，没有js,没有js

效果如下：

瀑布流

提示:

由于兼容性问题，建议在移动端使用~

2020-11-26