Front-end jquery for waterfall flow

Waterfall flow is something we often see, has been refreshed has been, in fact, it is very simple to achieve. The specific code is as follows

1.CSS Code

<style> *{margin:0;padding:0; }. Container{position:relative; }. container. Box{float: Left;padding:15px 0 0 15px; }. container. Box. pic{Border:1px solid #ccc;padding:10px;Border-radius:5px;Box-shadow:0 0 8px #ccc; }. Container img{width:150px; }</style>

2.HTML code

<Divclass= "Container">            <Divclass= "box">                <Divclass= "Pic"><imgsrc= "Images/1.jpg"alt="" /></Div>            </Div>            <Divclass= "box">                <Divclass= "Pic"><imgsrc= "Images/2.jpg"alt="" /></Div>            </Div>            <Divclass= "box">                <Divclass= "Pic"><imgsrc= "Images/3.jpg"alt="" /></Div>            </Div>            <Divclass= "box">                <Divclass= "Pic"><imgsrc= "Images/4.jpg"alt="" /></Div>            </Div>            <Divclass= "box">                <Divclass= "Pic"><imgsrc= "Images/5.jpg"alt="" /></Div>            </Div>            <Divclass= "box">                <Divclass= "Pic"><imgsrc= "Images/6.jpg"alt="" /></Div>            </Div>            <Divclass= "box">                <Divclass= "Pic"><imgsrc= "Images/7.jpg"alt="" /></Div>            </Div>            <Divclass= "box">                <Divclass= "Pic"><imgsrc= "Images/8.jpg"alt="" /></Div>            </Div>            <Divclass= "box">                <Divclass= "Pic"><imgsrc= "Images/9.jpg"alt="" /></Div>            </Div>            <Divclass= "box">                <Divclass= "Pic"><imgsrc= "Images/10.jpg"alt="" /></Div>            </Div>        </Div>

3.JavaScript code

<script>$ (window). On ("Load",function() {waterfall (); varDatainit = {"Data": [{"src": "1.jpg"},{"src": "2.jpg"},{"src": "3.jpg"},{"src": "4.jpg"},{"src": "5.jpg"},{"src": "6. jpg}]}; $ (window). Scroll (function(){                    if(Checkscroll ()) {//satisfying loading conditions$.each (Datainit.data,function(index,value) {//console.log (value["src"])                            var$b = $ ("<div class= ' box ' ></div>"); var$pic = $ ("<div class= ' pic ' ></div>"); var$img = $ ("); $img. attr ("src", "images/" + value["src"]);                            $img. AppendTo ($pic);                            $pic. AppendTo ($b); $b. AppendTo ($ (". Container"));                    });                } waterfall ();                }); $ (window). Resize (function() {waterfall ();            });                        }); functionWaterfall () {var$box = $ (". Container>.box"); var$bW = $box. First (). Outerwidth ();//get the width of a box                var$vW = $ (window). Outerwidth ();//Get Browser width                var$cols = parseint ($vW/$bW);//the maximum number of columns that can be ranked across the browser                varHARR = []; $(". Container"). CSS ({"width": $bW * $cols, "margin": "0 Auto"}); $box. each (function(i,val) {//var $bH = $ (this). Outerheight ();//Get the height of each box                    if(I < $cols) {//The index of the Traverse is less than the first row of columns    //Harr[i] = $ (val). Outerheight ();Harr.push ($ (val). Outerheight ());//Put the height of all box in the first row into the array Harr.$ (val). css ({"position": "Absolute", "left": $bW * I, "top": 0}); }Else{                        var$minH = Math.min.apply (NULL, HARR);//the smallest height in the Harr array    //var $minIndex = $.inarray ($minH, HARR);    //a $.inarray (element, array) that is used to find where an element is located in the entire array. The return value is a subscript                        var$minIndex = GetIndex ($minH);//Subscript for the minimum height$ (val). css ({"position": "Absolute", "top": $minH, "left": $minIndex *$bW}); harr[$minIndex]= harr[$minIndex] + $ (val). Outerheight ();//Update the smallest height in the array                    }                }); //get the lowest-height subscript                functionGetIndex (h) { for(varj = 0;j < harr.length;j++){                        if(Harr[j] = =h) {                            returnJ; }                    }                }            }            //Detecting Load conditions            functionCheckscroll () {var$sT = $ (window). scrolltop ();//the distance the scroll bar goes up                var$vH = $ (window). Outerheight ();//the height of the browser                var$box = $ (". Container>.box"); var$offT = $box. Last (). Offset (). Top;//gets the offset of the last box distance document                var$bH = $box. Last (). Outerheight ();//get the height of the last box                if(($vH + $sT) > ($offT + $bH/2)){                    return true; }Else{                    return false; }            }                </script>

4. Be sure to introduce a local jquery code

Example: <script src= "Js/jquery-3.2.1.min.js" type= "Text/javascript" charset= "Utf-8" ></script>

Front-end jquery for waterfall flow