javascript--Waterfall Stream

Simple Waterfall Stream Code implementation

The HTML code is as follows

<! DOCTYPE html>
Waterfalljs as follows:
Window.onload=function () {Waterfall (' main ', ' pin ');        var dataint={' data ': [{' src ': ' 1.jpg '},{' src ': ' 2.jpg '},{' src ': ' 3.jpg '},{' src ': ' 4.jpg '}]};             Window.onscroll=function () {if (Checkscrollside ()) {var oparent = document.getElementById (' main ');//Parent Object                for (Var i=0;i<dataint.data.length;i++) {var opin=document.createelement (' div ');//Add Element node                   Opin.classname= ' pin ';              Add Class name Name property Oparent.appendchild (Opin);                Add a child node var obox=document.createelement (' div ');                obox.classname= ' box ';                Opin.appendchild (OBox);                var oimg=document.createelement (' img ');                Oimg.src= './images/' +dataint.data[i].src;            Obox.appendchild (OIMG);        } waterfall (' main ', ' pin ');    };    }}/* parend Parent ID pin element id*/function waterfall (parent,pin) {var oparent=document.getelementbyid (parent);//Parent Object var aPin=getclassobj (Oparent,pin);//Gets the array that stores the Block box pin aPin var ipinw=apin[0].offsetwidth;//a block box pin wide var num=math.floor (docum ENT.DOCUMENTELEMENT.CLIENTWIDTH/IPINW)///number of pins in each row "window width divided by a block box width" oparent.style.csstext= ' width: ' +ipinw*num+ ' px;margin:0 auto; ';    /Set parent centered style: Fixed width + auto horizontal margin var pinharr=[];//is used to store the height of all the block boxes in each column.        for (Var i=0;i<apin.length;i++) {//traversal array aPin each block box element var Pinh=apin[i].offsetheight; if (i<num) {Pinharr[i]=pinh;//the NUM block box pin in the first row is added first into the array Pinharr}else{var minh=math.min.apply (            Null,pinharr);//The minimum value in the array Pinharr minH var minhindex=getminhindex (Pinharr,minh);            apin[i].style.position= ' absolute ';//Set Absolute displacement apin[i].style.top=minh+ ' px ';            apin[i].style.left=apin[minhindex].offsetleft+ ' px '; Array min High element high + add on apin[i] block box High pinharr[minhindex]+=apin[i].offsetheight;//Update added block box after sizing}}}/**** * by The class class of the parent and child elements gets the array of that homogeneous child element */function Getclassobj (parent,classname) {var obj=paRent.getelementsbytagname (' * ');//Gets all the subsets of the parent Var pins=[];//creates an array for collecting child elements for (Var i=0;i<obj.length;i++) {//traversing child elements,        Determine the category, press in the array if (obj[i].classname==classname) {Pins.push (obj[i]);    }    }; return PinS;}            /**** * Gets the index of the pin height minimum value of */function Getminhindex (Arr,minh) {for (var i in arr) {if (Arr[i]==minh) {        return i;    }}}function Checkscrollside () {var Oparent=document.getelementbyid (' main ');    var apin=getclassobj (oparent, ' pin '); Create the height of "Trigger Add block Box function waterfall ()": The Last block box is the distance from the top of the page + itself half the height (implementation does not roll to start loading) var lastpinh=apin[apin.length-1].offsettop+    Math.floor (APIN[APIN.LENGTH-1].OFFSETHEIGHT/2); var scrolltop=document.documentelement.scrolltop| | document.body.scrolltop;//Note Resolve compatibility var documenth=document.documentelement.clientheight;//page height return (lastPinH< scrolltop+documenth)? true:false;//returns True after reaching the specified height, triggering the waterfall () function}




javascript--Waterfall Stream