如何使用纯css实现瀑布流布局

这篇文章主要为大家展示了"如何使用纯css实现瀑布流布局"，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下"如何使用纯css实现瀑布流布局"这篇文章吧。

　　1、纯css瀑布流布局代码：

　　

　　纯css瀑布流布局效果如下：

　　2345截图20180928111644.png

　　2、jquery简易瀑布流布局的实现代码：

　　*{

　　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:"https://sjbz-fd.zol-img.com.cn/t_s120x90c/g5/M00/08/0A/ChMkJliEUgWIGWy8AAWUH9AG9zMAAZe7gPrREkABZQ3007.jpg"

　　},

　　{

　　src:"https://sjbz-fd.zol-img.com.cn/t_s120x90c/g5/M00/08/0A/ChMkJliEUgWIGWy8AAWUH9AG9zMAAZe7gPrREkABZQ3007.jpg"

　　},

　　{

　　src:"https://sjbz-fd.zol-img.com.cn/t_s120x90c/g5/M00/08/0A/ChMkJliEUgWIGWy8AAWUH9AG9zMAAZe7gPrREkABZQ3007.jpg"

　　},

　　{

　　src:"https://sjbz-fd.zol-img.com.cn/t_s120x90c/g5/M00/08/0A/ChMkJliEUgWIWzw0AAQmOu8l33oAAZe7gPdxW0ABCZS129.jpg"

　　},

　　{

　　src:"https://sjbz-fd.zol-img.com.cn/t_s120x90c/g5/M00/08/0A/ChMkJliEUgWIWzw0AAQmOu8l33oAAZe7gPdxW0ABCZS129.jpg"

　　},

　　{

　　src:"https://sjbz-fd.zol-img.com.cn/t_s120x90c/g5/M00/08/0A/ChMkJliEUgWIWzw0AAQmOu8l33oAAZe7gPdxW0ABCZS129.jpg"

　　},

　　{

　　src:"https://sjbz-fd.zol-img.com.cn/t_s120x90c/g5/M00/08/0A/ChMkJ1iEUgWIbpwIAAUz5kEUSy0AAZe7wASX0kABTP-083.jpg"

　　},

　　{

　　src:"https://sjbz-fd.zol-img.com.cn/t_s120x90c/g5/M00/08/0A/ChMkJ1iEUgWIbpwIAAUz5kEUSy0AAZe7wASX0kABTP-083.jpg"

　　},

　　{

　　src:"https://sjbz-fd.zol-img.com.cn/t_s120x90c/g5/M00/08/0A/ChMkJ1iEUgWIbpwIAAUz5kEUSy0AAZe7wASX0kABTP-083.jpg"

　　},

　　]

　　};

　　varcount=0;

　　$_(window).on('scroll',function(){

　　$.each(imgData.data,function(index,value){

　　var$oImg=$('').attr('src',$(this).attr("src"));

　　$oImg.appendTo($('li:eq('+count%4+')'))

　　count++;

　　})

　　})

以上是"如何使用纯css实现瀑布流布局"这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注行业资讯频道！