Native JavaScript + LESS implement waterfall stream_javascript skills

This article mainly introduces the method of implementing waterfall stream with native JavaScript + LESS, and attaches a specific example, which is recommended to partners in need. HTML (pay attention to the package relationship to facilitate js calls)

The Code is as follows:

LESS (less pre-compiled)

The Code is as follows:

*{
Margin: 0;
Padding: 0;
}
# Main {
Position: relative;

}
. Box {
Padding: 15px 0 0 15px;
Float: left;
}
. Pic {
Padding: 10px;
Border: 1px solid # ccc;
Border-radius: 5px;
Box-shadow: 0px 0px 5px # ccc;
Img {
Width: 165px;
Height: auto;
}
}

JavaScript (self-understanding annotation)

(The function has some flaws and is only used for learning and understanding)

The Code is as follows:

Window. onload = function (){
Waterfall ("main", "box ");
// Call a custom function. It acts on every box element in main;
Var dataInt = {"data": [{"src": "7.jpg"}, {" src ":" 8.jpg" },{ "src": "9.jpg "}, {"src": "6.jpg"}]}
// Simulate json data;
Window. onscroll = function (){
If (checkScrollSlide ){
// Call a custom function. Based on the function return value, determine whether the scrolling is out of the range;
Var oParent = document. getElementById ("main ");
For (var I = 0; I <dataInt. data. length; I ++ ){
Var oBox = document. createElement ("p ");
OBox. className = "box ";
OParent. appendChild (oBox );
// Create a box Block
Var oPic = document. createElement ("p ");
OPic. className = "pic ";
OBox. appendChild (oPic );
// Create a pic Block
Var oImg = document. createElement ("img ");
// Create an img element
OImg. src = "images/" + dataInt. data [I]. src;
// Set image reference;
OPic. appendChild (oImg );
};
Waterfall ("main", "box ");
// Stream the dynamically generated data blocks;
};
};
};
// Streaming layout main function, automatically adjust the position of data blocks;
Function waterfall (parent, box ){
// Retrieve all the box elements in main. "parent" indicates the parent level, and "box" indicates the box element;
Var oParent = document. getElementById (parent );
// Assign the parent element to the variable oParent;
Var oBoxs = getByClass (oParent, box );
// Use a custom function to obtain each box element in the parent level. The result is a set of all box elements;
// Assign the box element set to oBoxs again; (variables are not shared due to scope issues );
// Console. log (oBoxs. length );
// Print the number of box elements on the console for debugging;
Var oBoxW = oBoxs [0]. offsetWidth;
// Calculate the width of each column. The offsetWidth value includes the padding value;
// Console. log (oBoxW); test;
Var cols = Math.floor(document.doc umentElement. clientWidth/oBoxW );
// Calculate the number of columns displayed on the entire page (page width/box width );
OParent.style.css Text = "width:" + oBoxW * cols + "px; margin: 0 auto ";
// The width of the parent element main = the width of each column * Number of columns; and the left-right corner is in the middle;
Var hArr = [];
// Store the array of the height of each column;
For (var I = 0; I <oBoxs. length; I ++ ){
// Traverse the oBoxs array;
If (I // The condition is the first of each column in the first row;
HArr. push (oBoxs [I]. offsetHeight );
// Get the height of each column into the array;
} Else {
// The box element here is no longer the first line element;
Var minH = Math. min. apply (null, hArr );
// Obtain the minimum height of the first line and assign it to the variable;
// Console. log (minH );
Var index = getMinhIndex (hArr, minH );
// Call the custom function to obtain the index value of the variable;
OBoxs [I]. style. position = "absolute ";
OBoxs [I]. style. top = minH + "px ";
OBoxs [I]. style. left = oBoxW * index + "px ";
// Set the position of the current element;
// The left value of the current element = the index value of the top element * the width of each column;
// OBoxs [I]. style. left = oBoxs [index]. offsetLeft + "px ";
// Obtain the left value of the current element;
// A box element is added to the index column;
HArr [index] + = oBoxs [I]. offsetHeight;
// The updated height of each column = the original height of each column + the height of the subsequently added box element;
};
};
};
// Js native obtains elements through Class;
Function getByClass (parent, claName ){
// Get the element through the class; (get the claName element under the parent container ;)
Var boxArr = new Array ();
// Declare an array to store all elements whose classes are box;
Var oElements = parent. getElementsByTagName ("*")
// Declare the variable to store all the child elements (*) under this parent element (*);
For (var I = 0; I <oElements. length; I ++ ){
// Traverse the array oElements;
If (oElements [I]. className = claName ){
// If the calss class of an element in the array is the same as the claName parameter;
BoxArr. push (oElements [I]);
// Sorts the retrieved box element into the boxArr array;
};
};
Return boxArr;
// After the array is called, it goes through a series of functions and traverses. The obtained array is returned to the called function;
};
// Obtain the index value of the array element;
Function getMinhIndex (arr, val ){
// Arr is the parent array; val is the current element;
For (var I in arr ){
// Traverse from 0;
If (arr [I] = val ){
// Find the index value of the current element in the array;
Return I;
// The Return Value of the function is the index value of the current element;
};
};
};
// Check whether the conditions for rolling data blocks are met;
Function checkScrollSlide (){
Var oParent = document. getElementById ("main ");
Var oBoxs = getByClass (oParent, "box ");
Var lastBoxH = oBoxs [oBoxs. length-1]. offsetTop + Math. floor (oBoxs [oBoxs. length-1]. offsetHeight/2 );
// The height of the last box element from the top of the page (finding the offsetTop of the last box (oBoxs. lenght-1) + half of itself;
Var scrollTop = document. body. scrollTop | document.doc umentElement. scrollTop;
// The scroll distance of the browser scroll bar;
// Console. log (scrollTop );
Var height = document. body. clientHeight | document.doc umentElement. clientHeight;
// The height of the browser;
// Console. log (height );
Return (lastBoxH // Whether the Page scrolling distance is greater than the offsetTop of the last box element;
};

Summary:

It is no good to use waterfall streams to show photos. Below is an implementation method of waterfall streams (the length of each line is equal to the length of the browser window). It can also be implemented using css3, which is very simple, google, you will know.
My idea is to insert an image. When the image length and width ratio remain unchanged and the height is lower than 250, a loop is completed, that is, this row is inserted ,.
Then insert the next row in the next loop.