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

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

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.