Analysis of JavaScript waterfall flow principle to realize _javascript technique of picture scrolling loading

Let's go to the popular science waterfall stream

Waterfall Flow , also known as Waterfall flow layout. is a more popular Web page layout, visual representation of the uneven layout of multiple columns, as the page scroll down, this layout will continue to load the data block and attached to the current tail. The first site to use this layout is Pinterest, gradually in the domestic popular. Most of the domestic fresh station for this kind of style, such as Beauty said, Taobao have to use.

This is my implementation of an effect, is how to scroll all load does not play. It flows like a waterfall!

The implementation of the way here we only say the JS implementation method

Implementation principle:

Calculate the data block elements in the container for the first time 1 container total width 2 column width 3 minimum column number, after getting the number of columns, use an array to store all the height of the box, to find the minimum height. Then update the height according to the serial number; it's very simple to look at a mouthful.

For scrolling load: after which height is scrolled, need to load the data, in fact, this is the minimum height of the column, so that the current scroll value and minimum height comparison can be judged, whether to trigger loading data; is to write a function, to determine whether to achieve the load picture conditions, if it is achieved, start loading. For example, to get the last picture of the offsettop, the height of the visual area, scrolling distance, that is, when the picture offsettop less than the height of the visual area and the sum of the rolling distance, this time should be loaded, but the conditions can be arbitrarily set, you can also scroll to the picture half of the time As shown in the figure:

First on HTML CSS code

<! DOCTYPE html>  

JS code, with comments per line

Window.onload = function () {var data = {//analog background data in a JSON-formatted file "data": [{"src": "1.jpg"}, {"src": "2.jpg"},
 {"src": "3.jpg"}, {"src": "4.jpg"}, {"src": "5.jpg"},]}; Window.onscroll = function () {if (Checkscroll ()) {//To determine if there is a scrolling loading condition var oparent = document.getElementById (' container ')
   ; for (var i=0 i<data.data.length; i++) {var div1 = document.createelement (' div ');//create div element div1.classname = ' pi     n ';
    Set class Oparent.appendchild (DIV1);
    var div2 = document.createelement (' div ');//create div element div2.classname = ' Div-box ';
    Div1.appendchild (DIV2);
    var IMGs = document.createelement (' img ');//create img element imgs.style.width = ' 300px '; IMGS.SRC = ' img/' +data.data[i].src;
    Sets the Read path Div2.appendchild (IMGs);
    var p = document.createelement (' P ');//create P element p.innerhtml = ' Bai-blog Garden ';
   Div2.appendchild (P);  } Waterfall (' container ', ' pin ');
--Be careful not to forget this sentence, when rolling on the implementation of} waterfall (' container ', ' pin '); function waterfall (parent, Box){var oparent = document.getElementById (parent);/Get Parent object var abox = Getbyclass (Oparent,box);//Get collection of all boxes with a pin of class Var b Oxwidth = abox[0].offsetwidth;//gets a box of wide var pagewidth = document.body.clientwidth| | document.documentelement.clientwidth;//get the visual area wide var cols = Math.floor (pagewidth/boxwidth);//Get the number of columns var arrh = [];//
  The high for (Var i=0 i<abox.length; i++) {if (i<cols) {////When the number of the first column is less than Arrh.push (abox[i].offsetheight) for storing the box;
   else {var MinH = Math.min.apply (null,arrh);//Get the minimum height of the box word in the array MinH;

   var index = Getminindex (Arrh,minh); abox[i].style.position = ' absolute '//set absolute positioning abox[i].style.top = minh+ ' px ';//set Top, which is the minimum height abox[i].style.left = abox[ 0].offsetwidth*index+ ' px ';/set left, is a box of wide *index index number arrh[index]+=abox[i].offsetheight; Update Liegau}}} After new add box to get Class function Getbyclass (parent, classname) {var aclass = parent.getelementsbytagname (' * ') via Parent
 );

 var arr = []; for (var i=0; i<aclass.length; i++) {if (Aclass[i].classname = = className) {Arr.push (aclass[i]);
} return arr;
  The indexed index function Getminindex (arr,val) {for (I-arr) {if (arr[i] = val) {return i;
 }}//function Checkscroll () {var oparent = document.getElementById (' container ');
 var abox = Getbyclass (oparent, ' pin '); var lastboxheight = abox[abox.length-1].offsettop;//starts loading var scrolltop= when it rolls to this distance document.documentelement.scrolltop| | document.body.scrolltop;//compatible scrolling distance var documentheight = document.documentElement.clientHeight;
 Page height if (lastboxheight<scrolltop+documentheight) {return true;
 }
}

The above is the entire content of this article, I hope to help you learn.