The way to realize waterfall flow (native JS+JQUERY+CSS3) _javascript technique

Objective
project needs to get a waterfall flow of the page, with the waterfall this plugin, the feeling is still possible, the project will not have their own hands to write. I have nothing to do recently, just write one myself. The general idea is clear, still very good realization ...

native JavaScript version

<! DOCTYPE html>  

jquery version  

<! DOCTYPE html>  

General idea
1. Let the first row float first
2. Calculate the height of each block in the first row
3. Iterate through each block after the first row, one at the bottom of the minimum height
4. Load data Insert last, then recalculate
pay attention.
A. Native JS
1. The Getclassobj () function is defined to get the object of class classes for easy invocation. Consider compatibility getelementsbyclassname
2. Defines the index of the Getminhindex () function user gets the minimum value
3. Set the distance between blocks and blocks preferably with padding, so that offsetheight can be directly obtained height. If you set the margin, you'll need to add more distance to the outside margin.
4. The code set the timer load data, in fact, can be omitted, as long as the first load of data to ensure that the full screen can be. The onscroll event is not executed if the scroll bar is not present. There's no way to load the data.
5. The calculation width in the code can also be modified, the design of the page is a fixed-width waterfall flow. The main thing here is a responsive approach.

var arrbox=getclassobj (Parentid,childclass);//Getclassobj () gets the array var iboxw=arrbox[0].offsetwidth;//of the child class
Gets the width of the waterfall stream block
var num=math.floor (DOCUMENT.DOCUMENTELEMENT.CLIENTWIDTH/IBOXW);//Calculation window can hold several columns
oparent.style.width=iboxw*num+ ' px '//Set Parent width 

6. Each set of displacement, to the column height of the array to increase the value to prevent block overlap

arrbox[i].style.position= ' absolute '//Set Absolute displacement
arrbox[i].style.top=minh+ ' px ';
arrbox[i].style.left=minhindex*iboxw+ ' px ';//Direct access to Arrbox[minhindex].offsetleft
Arrboxh[minhindex]+=arrbox [i].offsetheight;//after adding, update min Liegau 

B.jquery
1. The idea is the same as JS, but jquery encapsulated a lot of methods, let us simple to achieve
2. Note the width (), with innerwidth () difference. The former can only get the width value (excluding the filler padding)

CSS3 version

<!
 DOCTYPE html>  

Pay attention.

1. Rolling load or additional JS is added
2. The loaded data is vertically arranged. The experience is not very friendly
3. Compatibility issues, Internet Explorer 10 +

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.