Popular Waterfall Flow page layout for unlimited loading (jquery)

Today to share with you a Waterfall Flow page layout, first with you to analyze the idea of implementation

Main idea: First, according to the width of the screen and the width of a single floating layer to determine the number of floating layer

　　　　　　　　

var $boxs = $ ("#main >div")        var boxw = $boxs. EQ (0  ). Outerwidth ();         var clos = Math.floor ($ (window). Width ()/Boxw);        $ ("#main"). Width (boxw*clos). CSS ('margin' ,'0 auto');

Second, use absolute positioning to determine the position of the floating layer, where I put a picture in the floating layer to show the effect

　　　　　　

varHarr=[]; $boxs. Each (function (index, Element) {varH=$boxs. EQ (index). Outerheight (); if(index<Clos) {Harr[index]=h; }                Else{                    varMinh=math.min.apply (NULL, HARR); varminhindex=$.inarray (Minh,harr); $ (Element). css ({'position':'Absolute',                        'Top': minh+'px',                        ' Left': minhindex*boxw+'px'}) Harr[minhindex]+=$boxs. EQ (index). Outerheight (); }

Third, according to the screen display height + scroll bar height and the last floating layer of the top value to determine the execution of the scrolling event

　　　　　　　　

$ (window). Scroll (function () {if(checkscroll) { for(varI=1;i<8; i++){                varobox=$ ("<div>"). AddClass ("Box"). AppendTo ($ ("#main")); varopic=$ ("<div>"). AddClass ("pic"). AppendTo ($ (obox)); $(""). attr ('src','images/'+ i +". jpg"). AppendTo ($ (OPIC));            } waterfall (); }}) function Checkscroll () {varlasttop=$ ("#main >div"). Last (). Offset (). Top+=math.floor ($ ("#main >div"). Last (). Outerheight ()/2); varscrolltop=$ (window). scrolltop (); varDocumeth=$ (window). Height (); return(Lasttop>scrolltop+documeth)?true:false; }

For example, click here for an example (more refresh next page to see the full effect)

　　　　　　

Popular Waterfall Flow page layout for unlimited loading (jquery)