Shulou(Shulou.com)06/01 Report--

This article mainly shows you "how to use pure css to achieve waterfall flow layout", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to use pure css to achieve waterfall flow layout" this article.

1. Pure css waterfall flow layout code:

CSS3 waterfall flow

/ * Big floor * /

.container {width:100%;margin:0auto;}

/ * Waterfall stratosphere * /

.waterfall {

-moz-column-count:4;/*Firefox*/

-webkit-column-count:4;/*Safari and Chrome*/

Column-count:4

-moz-column-gap:1em

-webkit-column-gap:1em

Column-gap:1em

}

/ * one content layer * /

.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

}

Landscape figure 1

Landscape figure 2

Landscape figure 3

Landscape figure 4

Landscape figure 5

The layout effect of pure css waterfall flow is as follows:

2345 Screenshot 20180928111644.png

2. The implementation code of jquery simple waterfall flow layout:

* {

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++

})

})

The above is all the content of the article "how to use pure css to implement waterfall flow layout". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.