Front-end Simulation 5-page waterfall stream loading

Html:

1 <DivID= "Masonry"class= "Container-fluid">2     <Divclass= "box"><imgsrc=".. /.. /img/test/wty1.png "></Div>3     <Divclass= "box"><imgsrc=".. /.. /img/test/wty2.png "></Div>4     <Divclass= "box"><imgsrc=".. /.. /img/test/wty3.png "></Div>5     <Divclass= "box"><imgsrc=".. /.. /img/test/wty4.png "></Div>6     <Divclass= "box"><imgsrc=".. /.. /img/test/wty5.png "></Div>7     <Divclass= "box"><imgsrc=".. /.. /img/test/wty1.png "></Div>8     <Divclass= "box"><imgsrc=".. /.. /img/test/wty2.png "></Div>9     <Divclass= "box"><imgsrc=".. /.. /img/test/wty3.png "></Div>Ten     <Divclass= "box"><imgsrc=".. /.. /img/test/wty4.png "></Div> One     <Divclass= "box"><imgsrc=".. /.. /img/test/wty5.png "></Div> A     <Divclass= "box"><imgsrc=".. /.. /img/test/wty1.png "></Div> -     <Divclass= "box"><imgsrc=".. /.. /img/test/wty2.png "></Div> -     <Divclass= "box"><imgsrc=".. /.. /img/test/wty3.png "></Div> the     <Divclass= "box"><imgsrc=".. /.. /img/test/wty4.png "></Div> -     <Divclass= "box"><imgsrc=".. /.. /img/test/wty5.png "></Div> - </Div>

Css:

{            padding: 20px;}  {           margin-bottom: 20px;            Float: left;            width: 220px;}  {           max-width: 100%}

Js:

//Waterfall Flow Layout    /** * principle *//when scrolling to the bottom 100 pixels, load new content * $ (document). Height ()-$ (this). ScrollTop ()-$ (this). Height () <100 *     */    var$container = $ (' #masonry '); $container. imagesloaded (function() {$container. Masonry ({itemselector:'. Box ', Gutter:20, isanimated:true        });    }); /*<div id= "masonry" class= "Container-fluid" > <div class= "box" ></div> <div class=" box "></div> <div class=" box "></div> <div class=" box "></div> <div class=" box "></div> </div> **/    varContent = ' <div class= ' box ' ></div> ' + ' <div class=" box "></div> ' + ' <div class=" box "></div> ' + ' <div class=" box "></div> ' + ' <div class=" box "></div>"; var$content =$ (content); var$content 2 =$ (content); var$content 3 =$ (content); var$content 4 =$ (content); var$content 5 =$ (content); /*$ (' #add '). On (' click ', Function () {$container. Append ($content). Masonry (' appended ', $content); });*/    varCount = 0; $ (window). On (' Scroll ',function () {        var_winthis = $ ( This); var_winscrolltop =_winthis.scrolltop (); var_docheight =$ (document). Height (); var_winheight =_winthis.height (); if(_winscrolltop + _winheight = =_docheight) {            //pull to the bottom of the page.            if(Count < 5) {                //$container. Append ($content). Masonry (' appended ', $content);count++; //Console.log (count);                Switch(count) { Case1: $container. Append ($content). Masonry (' Appended ', $content);  Break;  Case2: $container. Append ($content 2). Masonry (' Appended ', $content 2);  Break;  Case3: $container. Append ($content 3). Masonry (' Appended ', $content 3);  Break;  Case4: $container. Append ($content 4). Masonry (' Appended ', $content 4);  Break;  Case5: $container. Append ($content 5). Masonry (' Appended ', $content 5);  Break; }            }Else{Count= 10; }        }    });

Front-end Simulation 5-page waterfall stream loading