How to implement Waterfall flow layout with JavaScriptL
Most people do not understand the knowledge points of this article "how to achieve waterfall flow layout in JavaScriptL", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to achieve waterfall flow layout in JavaScriptL" article.
First, the classic routine: JavaScript+ absolute positioning
HTML structure:
...
A brief introduction
...
The entire waterfall flow area uses one as the parent container
Each data block in the waterfall stream uses .box as the basic layout, and .wrapper presents the style and actual content.
CSS style:
* {margin:0;padding:0;} html,body {width:100%;height:100%;background-color:#EDEDED;} # main {
Position:relative
Width:1280px;/* limits the width of the parent container * /
Margin:0auto
} .box {
Position:absolute
Margin*/ is not recommended for padding:7px;/*
Box-sizing:border-box
Width:256px;/* limits the width of data blocks * /} .wrapper {
Padding:5px
Background-color:#fff
Border:1pxsolid#e4e4e4
Box-shadow:01px5pxrgba (0J. 0J. 2)
} .pic {
Font-size:0;/* eliminates gaps between in-line elements * /} .picimg {
Width:100%
Height:auto
} .text {
Color:#999
Background:#FAFAFA
Font-size:14px
Padding-top:5px
}
Padding is set in .box to allow visual spacing
The reason why you do not use margin is that you will use js later to get the offsetWidth and offsetHeight of the element
The values of these two attributes do not calculate margin.
JavaScript:
_ window.onload=function () {
WaterFall ('main','box')
}
FunctionwaterFall (main,box) {varmain=document.getElementById (main); varboxs=main.getElementsByClassName (box); varboxWidth=boxs [0] .offsetWidth; / / get the width of each data block
VarmainWidh=main.offsetWidth;// gets the width of the main container
Varcols=Math.floor (mainWidh/boxWidth) / / count the number of columns
VarheightArr= []; / / defines an array of top values.
For (vari=0;i
