Code for implementing waterfall stream layout using JavaScript

This article mainly introduces the implementation code of JavaScript waterfall stream layout, which has some reference value, interested friends can refer to this article to introduce the implementation code of JavaScript waterfall stream layout in detail, which has some reference value. Interested friends can refer to it.

Let's talk about the waterfall stream layout.

Is a page composed of a bunch of data blocks with equal width and different heights,

The first row is arranged in order, and other data blocks are sorted in order by selecting the lowest column in each column.

First, implement the Framework.

14 images are defined here. Each image is enclosed by a class = box attribute and a class = "pic" attribute, and its style is defined in css:

*{  padding: 0px;  margin: 0px; } #main{  position: relative; } .box{/*  display: inline-block;*/  padding: 15px 0px 0px 15px;  float: left; } .pic{  padding: 10px;  border-radius: 5px;  border:1px solid #ccc;  box-shadow: 0 0 5px #ccc; } .pic img{  width: 165px;  height: auto; } 

As follows:

Before writing code, because the box attribute is used, and js does not directly define the method for obtaining the class, we need to write a method for obtaining the class here:

Function getByClass (parent, className) {var boxArr = new Array (); // It is used to obtain all the elements oElement = parent whose class is box. getElementsByTagName ('*'); for (var I = 0; I
 
  
The two parameters are the parent element and the classname to be searched.
  
Next, write the function:
  
// Call the window function in the onload function first. onload = function () {waterFull ('main', 'box');} function waterFull (parent, children) {// obtain the element var oParent = document of the parent element and all its class = box elements. getElementById (parent); var oBoxs = getByClass (oParent, children); // as we mentioned earlier, we hope to keep the number of columns in the data block unchanged. Since each data block is of equal width, you can obtain the width of the data block based on the width of the first data block. Then, calculate the number of columns in the data block and rounded down. Var oBoxW = oBoxs [0]. offsetWidth; var cols = Math.floor(document.doc umentElement. clientWidth/plain Text = 'width: 'cols * oBoxW + 'px; margin: 0 auto'; // after all the styles are defined, data blocks are arranged. First, the first line is directly arranged. Defines the height of each column in an array. Starting from the second row, each data block is placed in the column with the lowest height. First, we have to traverse all the boxes, that is, oBoxsvar arrH = []; // define an array to store the height of each column for (var I = 0; I <oBoxs. length; I ++) {// when it is the first row, data blocks are directly arranged in sequence, and the height of each column is recorded in the array if (I <cols) {arrH [I] = oBoxs [I]. offsetHeight;} // when I> cols, We need to traverse the heights of all the preceding columns and place the next image in the appropriate position. Else {// first find the columns with the lowest height in the array. We all know that there is Math. min can find the smallest number, but it must accept a set of numbers, so here we will use Math. min. apply () method var minH = Math. min. apply (null, arrH); // defines a variable and stores the smallest height in the array. // after finding the smallest height, we need to know its index, in order to find a suitable position for the next data block, so a function is defined below to find the minimum value. // Define a variable to accept the return value of the getMinhIndex function var minIndex = getMinhIndex (arrH, minH); // after obtaining the index with the smallest number of columns in height, you can place the next element in the appropriate location oBoxs [I]. style. position = 'abort'; oBoxs [I]. style. top = minH + 'px '; oBoxs [I]. style. left = minIndex * oBoxW + 'px '; // The current data block is finally placed in a proper position, but do not forget to update the arrH array arrH [minIndex] + = oBoxs [I]. offsetHeight ;}}// subscript function getMinhIndex (array, min) {for (var I in array) {if (array [I] = min) for obtaining the current minimum value) return I ;}}
  
The above is the complete js implementation code for waterfall stream layout. As follows:

  

  
Attached source code:
  
Js Code:
  
Window. onload = function () {waterFull ('main', 'box');} function waterFull (parent, children) {var oParent = document. getElementById (parent); // var oBoxs = parent. querySelectorAll (". box "); var oBoxs = getByClass (oParent, children); // calculate the number of columns displayed on the entire page. var oBoxW = oBoxs [0]. offsetWidth; var cols = Math.floor(document.doc umentElement. clientWidth/oBoxW); // set the main width and center oParent.style.css Text = 'width: '+ oBoxW * cols + 'px; margin: 0 auto '; // find the image with the smallest height and put the next image below. // define an array to store the height of each column, the height of all columns in the first row is initialized. var arrH = []; for (var I = 0; I <oBoxs. length; I ++) {if (I <cols) {arrH. push (oBoxs [I]. offsetHeight);} else {var minH = Math. min. apply (null, arrH); var minIndex = getMinhIndex (arrH, minH); oBoxs [I]. style. position = 'abort'; oBoxs [I]. style. top = minH + 'px '; oBoxs [I]. style. left = minIndex * oBoxW + 'px '; // oBoxs [I]. style. left = arrH [minIndex].; arrH [minIndex] + = oBoxs [I]. offsetHeight ;}} function getByClass (parent, className) {var boxArr = new Array (); // used to obtain all the elements oElement = parent whose class is box. getElementsByTagName ('*'); for (var I = 0; I
   
    
Html and css code: