JavaScript waterfall stream layout implementation code, javascript waterfall

JavaScript waterfall stream layout implementation code, javascript waterfall

Let's talk about the waterfall stream layout.

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

Many websites now use this waterfall layout, such as mogujie.com. Beautiful saying.
First, we need to understand how it is arranged.
The number of columns in each row is calculated based on the ratio of the image width to the page width ..
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.

<div id = "main"> <div class = "box">  <div class = "pic">     </div> </div> <div class = "box">  <div class = "pic">     </div> </div> <div class = "box">  <div class = "pic">     </div> </div> <div class = "box">  <div class = "pic">     </div> </div> <div class = "box">  <div class = "pic">     </div> </div> <div class = "box">  <div class = "pic">     </div> </div> <div class = "box">  <div class = "pic">     </div> </div> <div class = "box">  <div class = "pic">     </div> </div> <div class = "box">  <div class = "pic">     </div> </div> <div class = "box">  <div class = "pic">     </div> </div> <div class = "box">  <div class = "pic">     </div> </div> <div class = "box">  <div class = "pic">     </div> </div> <div class = "box">  <div class = "pic">     </div> </div> <div class = "box">  <div class = "pic">     </div> </div> <div class = "box">  <div class = "pic">     </div> </div></div>

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; } </style>

As follows:

In fact, the six images in each row are not fixed. When you narrow down the window, it will become two or three or four columns. However, for future layout, we set it to a fixed number of columns, that is, dividing the size of the window by the size of the image and rounding down.

Next we will write about the waterfall stream layout implemented by js.
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 <oElement. length; I ++) {if (oElement [I]. className = className) {boxArr. push (oElement [I]) ;}}; return boxArr ;}

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 <oElement. length; I ++) {if (oElement [I]. className = className) {boxArr. push (oElement [I]) ;}}; return boxArr ;}// obtain the subscript of the current minimum value. function getMinhIndex (array, min) {for (var I in array) {if (array [I] = min) return I ;}}

Html and css code:

<! DOCTYPE html> 
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.