Native JavaScript LESS implements waterfall flow_javascript skills

HTML (pay attention to the package relationship to facilitate js calling)

Copy code The code is as follows:

 
    

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

    

 

LESS(less预编译)

复制代码 代码如下:

 * {
     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(自己理解的注解)

(函数存在一定瑕疵,仅用于学习理解)

复制代码 代码如下:

window.onload = function () {
waterfall("main","box");
//Call a custom function; acts on each box element under 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; determine whether the scrolling is out of range based on the function return value;
            var oParent = document.getElementById("main");
for (var i = 0; i < dataInt.data.length; i ) {
                var oBox = document.createElement("div");
                  oBox.className = "box";
                    oParent.appendChild(oBox);
//Create box block
                var oPic = document.createElement("div");
                   oPic.className = "pic";
oBox.appendChild(oPic);
//Create pic block
                var oImg = document.createElement("img");
//Create img element
                 oImg.src = "images/" dataInt.data[i].src;
//Set image reference;
oPic.appendChild(oImg);
             };
waterfall("main","box");
// Layout dynamically generated data blocks in a streaming manner;
          };
};
};
//Main function of streaming layout, automatically adjusts the position of data blocks;
function waterfall (parent,box) {
// Take out all the box elements under main; "parent" represents the parent, and box represents the box element;
var oParent = document.getElementById(parent);
//Assign the parent element to the variable oParent;
var oBoxs = getByClass(oParent,box);
//Through the custom function, get each box element under the parent; what you get is the collection of all box elements;
//Assign the obtained set of box elements to oBoxs again; (because of scope issues, variables are not shared);
// console.log(oBoxs.length);
//Print the number of box elements in the console for debugging;
var oBoxW = oBoxs[0].offsetWidth;
//Calculate the width of each column; offsetWidth is the width including padding;
// console.log(oBoxW); test;
var cols = Math.floor(document.documentElement.clientWidth/oBoxW);
//Calculate the number of columns displayed on the entire page (page width/box width);
oParent.style.cssText = "width:" oBoxW*cols "px;margin:0 auto";
//The width of the parent element main = the width of each column * the number of columns; and centered on the left and right;
var hArr = [];
//Array storing the height of each column;
for (var i = 0; i < oBoxs.length; i ) {
//Traverse the oBoxs array;
If (i // Here is the condition that the first column of the first line is;
hArr.push(oBoxs[i].offsetHeight);
//Get the height of each column and put it into the array;
          }else{
//The box element here is no longer the element in the first row;
            var minH = Math.min.apply(null,hArr);
//Get the minimum height of the first row and assign it to the variable;
                         // console.log(minH);
            var index = getMinhIndex(hArr,minH);
//Call a custom function to get the index value of this 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";
//The second method is to get the left value of the current element;
//At this time, 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 and the height of the box element added later;
          };
};
};
//JS natively obtains elements through Class;
function getByClass (parent,claName) {
//Get elements through class; (Get the element of claName under the container of the parent parent;)
var boxArr = new Array();
//Declare an array to store all obtained elements with class box;
var oElements = parent.getElementsByTagName("*")
//Declare variables to store all 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 parameter claName;
               boxArr.push(oElements[i]);
//Category the traversed box element into the boxArr array;
          };
};
Return boxArr;
//After calling the array, traverse through a series of functions; return the obtained array to the calling function;
};
//Get 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){
//Start traversing from 0;
If(arr[i]==val){
//Find the index value corresponding to 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 block loading 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 (find the offsetTop of the last box (oBoxs.lenght-1)) half of itself;
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
//The scrolling distance of the browser scroll bar;
// console.log(scrollTop);
var height = document.body.clientHeight || document.documentElement.clientHeight;
//Height of browser viewport;
// console.log(height);
Return (lastBoxH //Whether the scrolling distance of the page is greater than the offsetTop of the last box element;
};

Summary:

There is nothing better than using waterfall flow to display photos. The following is an implementation method of waterfall flow (the length of each line is equal to the length of the browser window). It can also be implemented with css3. It is very simple. You can find out by searching Google. .
My idea is to insert pictures one by one. When the aspect ratio of the pictures in this row remains unchanged and the height is lower than 250, a cycle is completed, that is, this row is inserted.
Then enter the next loop to insert the next row.