How to use pure css to implement waterfall flow layout
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!
