這篇文章主要為大家展示了“如何使用純css實(shí)現(xiàn)瀑布流布局”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“如何使用純css實(shí)現(xiàn)瀑布流布局”這篇文章吧。

創(chuàng)新互聯(lián)專(zhuān)業(yè)為企業(yè)提供山陽(yáng)網(wǎng)站建設(shè)、山陽(yáng)做網(wǎng)站、山陽(yáng)網(wǎng)站設(shè)計(jì)、山陽(yáng)網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、山陽(yáng)企業(yè)網(wǎng)站模板建站服務(wù)，十多年山陽(yáng)做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

1、純css瀑布流布局代碼：

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

2345截圖20180928111644.png

2、jquery簡(jiǎn)易瀑布流布局的實(shí)現(xiàn)代碼：

*{

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實(shí)現(xiàn)瀑布流布局”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！