Using JavaScript and jquery to achieve waterfall flow

▓▓▓▓▓▓ approximate Introduction

　　I learned the waterfall stream with native JS and jquery on the web and made a note here.

▓▓▓▓▓▓ is implemented with JavaScript

　Basic structure:

    <DivID= "Main">        <Divclass= "box">            <Divclass= "Pic"><imgsrc= "Images/1.jpg"alt=""></Div>        </Div>        <Divclass= "box">            <Divclass= "Pic"><imgsrc= "Images/2.jpg"alt=""></Div>        </Div>                ...                ...                ...     </Div>

　　Basic style:

    *{margin:0px;padding:0px; }#main{position:relative; }. Box{padding:15px 0 0 15px;float: Left; }. pic{padding:10px;Border:1px solid #ccc;Border-radius:5px;Box-shadow:0 0 5px #ccc; }

Ideas:

1, get all the #main under. Box

2, the calculation page has several columns of the picture, and set the width of the page

3. Find the columns with the smallest height in these columns

4, starting from the second line, set the picture as relative positioning, put a picture below the height of the smallest column

5, update the height of the column, repeat the 3, 4, 5 steps until the picture is finished loading

6, according to the location of the last picture to determine whether to continue loading pictures (lazy loading)

Realize:

1, get all the #main under. Box

 //             var  oparent = document.getElementById (parent);  var  OBox = Getbyclass (oparent,box); 

        // get elements        based on class function Getbyclass (parent,clsname) {            var arr = [];   used to store all the elements obtained by the class as box            var oelement = parent.getelementsbytagname (' * ')            ;  for (var i=0;i<oelement.length;i++) {                if(oelement[i].classname = =  Clsname) {                    arr.push (oelement[i]);                }            }             return arr;        }

　　　2, the calculation page has several columns of the picture, and set the width of the page

            // calculates the number of columns displayed for the entire page (width of the page/box)            var oboxw = obox[0].offsetwidth;             var cols = Math.floor (DOCUMENT.DOCUMENTELEMENT.CLIENTWIDTH/OBOXW);            // Set the width            of main OParent.style.cssText = ' width: ' + oboxw*cols + ' px;margin:0 auto; ';

　　3. Find the columns with the smallest height in these columns

4, starting from the second line, set the picture as relative positioning, put a picture below the height of the smallest column

5, update the height of the column, repeat the 3, 4, 5 steps until the picture is finished loading

            //store height for each column            varHARR = [];  for(vari=0;i<obox.length;i++){                if(i<cols) {                    //the height of the first line of the pictureHarr.push (obox[i].offsetheight); }Else{                    varMinH = Math.min.apply (NULL, HARR); varindex =Getminindex (Harr,minh); Obox[i].style.position= "Absolute"; Obox[i].style.top= MinH + ' px '; //obox[i].style.left = oboxw*index+ ' px ';Obox[i].style.left = obox[index].offsetleft + ' px '; //Update the height of each columnHarr[index] + =Obox[i].offsetheight; }            }

        // get the lowest index value        per column height function Getminindex (arr,value) {            for (var in arr) {                if  (Arr[i] = = value)                    {return  i;                }}        }

　　　6, according to the location of the last picture to determine whether to continue loading pictures (lazy loading)

The assumption is that the data is given back

            // Data            var dataint = {' Data ': [{' src ': ' 1.jpg '},{' src ': ' 2.jpg '},{' src ': ' 3.jpg '},{' src ': ' 4.jpg '}]};

　　

　　　　Executes when scroll bars are scrolled

            // When scroll bars scroll            function () {                scrollslide (dataint);            }

　　

　　　　Based on the position of the last picture, determine whether to load

        //Determine if there is a condition for a scrollbar to load a data block        functionCheckscrollslide (parent,clsname) {varOparent =document.getElementById (parent); varOBox =Getbyclass (oparent,clsname); varLastboxh = Obox[obox.length-1].offsettop + Math.floor (OBOX[OBOX.LENGTH-1].OFFSETHEIGHT/2);varscrolltop = Document.documentElement.scrollTop | |Document.body.scrollTop; varHeight = Document.documentElement.clientHeight | |Document.body.clientHeight; return(Lastboxh < scrolltop + height)?true:false; }

　　　Loading pictures

        //Execute when scroll bar scrolls        functionScrollslide (dataint) {////Determine if there is a condition for the scroll bar to load the data block            if(Checkscrollslide (' Main ', ' box ')){                varOparent = document.getElementById (' main '); //renders a block of data to the end of the current page                 for(vari=0;i<dataint.data.length;i++){                    varOboxs = document.createelement (' div '); Oboxs.classname= ' box ';                    Oparent.appendchild (OBOXS); varOPic = document.createelement (' div '); Opic.classname= ' pic ';                    Oboxs.appendchild (OPic); varoimg = document.createelement (' img '); OIMG.SRC= ' images/' +dataint.data[i].src;                Opic.appendchild (OIMG); } Waterfall (' Main ', ' box '); }

▓▓▓▓▓▓ is implemented with Jqurey

　The idea of using jquery is the same, just put the code directly

$ (window). On (' Load ',function() {waterfall (); vardataint={' data ': [{' src ': ' 1.jpg '},{' src ': ' 2.jpg '},{' src ': ' 3.jpg '},{' src ': ' 4.jpg '}]}; $ (window). On (' Scroll ',function() {scrollslide (dataint);        })        }); functionWaterfall () {var$oBox = $ (' #main >div '); varOboxw = $oBox. EQ (0). Outerwidth (); varcols = Math.floor ($ (window). Width ()/oboxw); $ (' #main '). css ({' Width ': cols *Oboxw,' Margin ': ' 0 auto '            }); varHARR = []; $oBox. each (function(index,value) {varOboxh =$oBox. EQ (index). Height (); if(index<cols)                {Harr.push (OBOXH); }Else{                    varMinH = Math.min.apply (NULL, HARR); varMinhindex =$.inarray (Minh,harr); $ (value). css ({' Position ': ' absolute ',                        ' Top ': MinH + 15,                        ' Left ': $oBox. EQ (minhindex). Position (). left}); Harr[minhindex]+ = $oBox. EQ (index). Height () + 15;        }            }); }        functioncheckscrollslide () {var$lastBox = $ (' #main >div '). Last (); varLastboxh = $lastBox. Offset (). Top + Math.floor ($lastBox. Height ()/2);varScrollTop =$ (window). scrolltop (); varClienth =$ (window). Height (); return(Lastboxh < scrolltop + clienth)?true:false; }        functionScrollslide (dataint) {if(Checkscrollslide ()) {$.each (Dataint.data,function(index,value) {var$Box = $ (' <div> '). addclass (' Box '). AppendTo (' #main ')); var$Pic = $ (' <div> '). addclass (' Pic ')). AppendTo ($Box); $('  '). attr (' src ', ' images/' + $ (value). attr (' src ')) . AppendTo ($Pic);            }) waterfall (); }        }

Using JavaScript and jquery to achieve waterfall flow