How waterfall streams are implemented

HTML

<div id= "Container" >
<div class= "box" >
<div class= "Box_img" >

</div>
</div>
<div class= "box" >
<div class= "Box_img" >

</div>
</div>
<div class= "box" >
<div class= "Box_img" >

</div>
</div>
<div class= "box" >
<div class= "Box_img" >

</div>
</div>
<div class= "box" >
<div class= "Box_img" >

</div>
</div>
<div class= "box" >
<div class= "Box_img" >

</div>
</div>
<div class= "box" >
<div class= "Box_img" >

</div>
</div>
<div class= "box" >
<div class= "Box_img" >

</div>
</div>
<div class= "box" >
<div class= "Box_img" >

</div>
</div>
<div class= "box" >
<div class= "Box_img" >

</div>
</div>
<div class= "box" >
<div class= "Box_img" >

</div>
</div>
<div class= "box" >
<div class= "Box_img" >

</div>
</div>
</div>
 CSS

#container {
    position:relative;
}
. box{
    padding:10px;
    Float:left;
}
/* Customize the color and border size and fillet of the container that hosts the picture */
. box_img{
    width:282px;
    Overflow:hidden;
}
Js

Window.onload = function () {
Waterflow ("Container", "box");
Waterflow ("Container1", "box");
};
function Waterflow (parent, Chirld) {
var wparent = document.getElementById (parent);//Get Parent div, outer level container
var Allarr = Getallchirld (Wparent,chirld);//Get all container div with class box
var wscreenwidth = document.documentelement.clientwidth;//Get screen width
var wchirldwidth = wparent.getelementsbytagname ("*");//Get all the tags
var num = Math.floor (wscreenwidth/wchirldwidth[0].offsetwidth);//This is a Math algorithm that is designed to convert decimals to integers,
So you can know the maximum number of pictures per line
Wparent.style.cssText = ' width: ' +wchirldwidth[0].offsetwidth*num+ ' px;margin:0 auto ';//fixed number of positions per row and left and right margin
Get the minimum height per row
Getminheightofcols (Allarr, num);
}
function Getallchirld (parent,classname) {
Get all the tags
var Wchirld = parent.getelementsbytagname ("*");
Create an array
var chirldarr = [];
Iterate over the Wchirld, placing the same label where ClassName equals classname (passed in arguments) into the array Chirldarr
for (var i = 0; i<wchirld.length; i++) {
if (wchirld[i].classname==classname) {
Because it's a bit push, it's not put in one, it's the last one in the array.
Chirldarr.push (Wchirld[i]);
}
}
Returns the array
return Chirldarr;
}
function Getminheightofcols (Chirdarr, num) {
Create an array to hold the height of each row
var onlyonecolsarr = [];
for (var i = 0; i<chirdarr.length; i++) {

if (i<num) {
NUM is the parameter passed in, that is, the number of pictures for each row, the purpose of this step is to pass the height of each picture in the first row to be stored as a new array
Onlyonecolsarr[i]=chirdarr[i].offsetheight;
} else {
Enter this method when it is larger than the number of pictures per row, Math.min.apply This method to get the minimum value in the array
var minheightofcols = Math.min.apply (null, Onlyonecolsarr);
The purpose of this method is to get the minimum height picture of the following table, that is, the number of sheets in each line, see below for specific methods
var minheightofindex = Getminindex (Onlyonecolsarr, minheightofcols);
Define layout as absolute layout
Chirdarr[i].style.position = "absolute";
Get the height of the next line of pictures
Chirdarr[i].style.top = minheightofcols + "px";
Get the next line of the picture should be placed in that position
Chirdarr[i].style.left = chirdarr[minheightofindex].offsetleft + "px";
Add two picture heights to get a new height for the next calculation
Onlyonecolsarr[minheightofindex] + = chirdarr[i].offsetheight;
}
}

}
This method is for determining the minimum height subscript
function Getminindex (Onlyonecolsarr, min) {
Iterate through the array of heights passed in
for (var i in Onlyonecolsarr) {
If the height is equal to the minimum height, return i is the image subscript
if (onlyonecolsarr[i] = = min) {
return i;
}
}
}

How waterfall streams are implemented