这篇文章主要为大家展示了“如何使用纯css实现瀑布流布局”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“如何使用纯css实现瀑布流布局”这篇文章吧。
1、纯css瀑布流布局代码：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>CSS3瀑布流</title>
<style>
.container{width:100%;margin:0auto;}
.waterfall{
-moz-column-count:4;
-webkit-column-count:4;
column-count:4;
-moz-column-gap:1em;
-webkit-column-gap:1em;
column-gap:1em;
}
.item{
padding:1em;
margin:001em0;
-moz-page-break-inside:avoid;
-webkit-column-break-inside:avoid;
break-inside:avoid;
border:1pxsolid#000;
}
.itemimg{
width:100%;
margin-bottom:10px;
}
</style>
</head>
<body>
<div>
<div>
<div>
<imgsrc="/file/upload/202210/19/wl0jzzwqcuc.html">
<p>风景图1</p>
</div>
<div>
<imgsrc="/file/upload/202210/19/x4hp1uln3o0.html">
<p>风景图2</p>
</div>
<div>
<imgsrc="/file/upload/202210/19/1nhwd4jvp5q.html">
<p>风景图3</p>
</div>
<div>
<imgsrc="/file/upload/202210/19/yw21tsfphls.html">
<p>风景图4</p>
</div>
<div>
<imgsrc="http://img4.imgtn.bdimg.com/it/u=3450240447,3799203473&fm=26&gp=0.jpg">
<p>风景图5</p>
</div>
</div>
</div>
</body>
</html>
纯css瀑布流布局效果如下：
2345截图20180928111644.png
2、jquery简易瀑布流布局的实现代码：
<div>
<ul>
<li><imgsrc="/file/upload/202210/19/zbpw5nmmc0a.jpg"alt=""><imgsrc="/file/upload/202210/19/hmyv2dsvg3p.jpg"alt=""></li>
<li><imgsrc="/file/upload/202210/19/gzispjs51x3.jpg"alt=""><imgsrc="/file/upload/202210/19/x3bd1mjzjes.jpg"alt=""></li>
<li><imgsrc="/file/upload/202210/19/wi1gsv5wmfb.jpg"alt=""><imgsrc="/file/upload/202210/19/v3rbeacsiz3.jpg"alt=""></li>
<li><imgsrc="/file/upload/202210/19/l2fra11rvhz.jpg"alt=""><imgsrc="/file/upload/202210/19/xlente11kpp.jpg"alt=""></li>
</ul>
</div>
*{
margin:0;
padding:0;
}
body{
min-height:200vh;
}
div{
width:90%;
margin:auto;
}
ul{
margin-top:10px;
list-style:none;
}
li{
border:1pxsolid#000;
border-radius:5px;
width:24%;
float:left;
margin-right:2px;
}
img{
width:98%;
display:block;
margin:auto;
margin-bottom:5px;
}
varimgData={
data:[{
src:"/file/upload/202210/19/zbpw5nmmc0a.jpg"
},
{
src:"/file/upload/202210/19/zbpw5nmmc0a.jpg"
},
{
src:"/file/upload/202210/19/zbpw5nmmc0a.jpg"
},
{
src:"/file/upload/202210/19/gzispjs51x3.jpg"
},
{
src:"/file/upload/202210/19/gzispjs51x3.jpg"
},
{
src:"/file/upload/202210/19/gzispjs51x3.jpg"
},
{
src:"/file/upload/202210/19/wi1gsv5wmfb.jpg"
},
{
src:"/file/upload/202210/19/wi1gsv5wmfb.jpg"
},
{
src:"/file/upload/202210/19/wi1gsv5wmfb.jpg"
},
]
};
varcount=0;
$(window).on('scroll',function(){
$.each(imgData.data,function(index,value){
var$oImg=$('<img>').attr('src',$(this).attr("src"));
$oImg.appendTo($('li:eq('+count%4+')'))
count++;
})
})
以上是“如何使用纯css实现瀑布流布局”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网行业资讯频道！
