jquery for waterfall Flow

jquery Waterfall Stream JS Analysis: First listen to the window event to get the picture loading location, call the picture loading position function, and then the mouse to slide the distance to load the picture

1.HTML layout:

1 <DivID= "Container">2             <Divclass= "box">3                 <Divclass= "Content">4                     <imgsrc=".. /img/1.jpg "> 5                 </Div>6             </Div>7             <Divclass= "box">8                 <Divclass= "Content">9                     <imgsrc=".. /img/9.jpg "> Ten                 </Div> One             </Div> A             <Divclass= "box"> -                 <Divclass= "Content"> -                     <imgsrc=".. /img/11.jpg ">  the                 </Div> -             </Div> -             <Divclass= "box"> -                 <Divclass= "Content"> +                     <imgsrc=".. /img/12.jpg ">  -                 </Div> +             </Div> A <--Classyou can copy a few more for box--> at                         </Div>

2.CSS Style:

1 <style>2             *{padding:0;margin:0;}3 . Box{position:relative;float: Left;/*Position:absolute*/}4 . Content{padding:10px;Border:1px solid #ccc;Box-shadow:0 0 5px #ccc;5 Border-radius:5px;}6 img{width:190px;Height:Auto;}7 </style>

3.js Code (note is a bit messy)

<script>            $(function(){                //Listen for window events to get the picture loading location$ (window). On ("Load",function() {imgloction (); vardataint={' data ': [{' src ': ' 1.jpg '},{' src ': ' 2.jpg '},{' src ': ' 3.jpg '},{' src ': ' 4.jpg '}]}; Window.onscroll=function(){                    if(Checkscrollside ()) {$.each (Dataint.data,function(Index, value) {var$oPin = $ (' <div> '). addclass (' box '). AppendTo ($ ("#container" ) ); var$oBox = $ (' <div> '). addclass (' content '). AppendTo ($oPin); $('  '). attr (' src ', './img/' + $ (value). attr (' src ')) . AppendTo ($oBox);                        });                    Imgloction ();                }; }                                    })            })            functioncheckscrollside () {var$aPin = $ (". Box" ); varLastpinh = $aPin. Last (). Get (0). OffsetTop + Math.floor ($aPin. Last (). Height ()/2);//create "trigger Add block Box function waterfall ()" Height: The last block box is the distance from the top of the page + itself half high (the implementation does not roll to start loading)varscrolltop = $ (window). scrolltop ()//attention to resolving compatibility                varDocumenth = $ (document). width ();//page Height                return(Lastpinh < scrolltop + documenth)?true:false;//returns true after reaching the specified height, triggering the waterfall () function            }                                                            functionimgloction () {//start by creating a box object that corresponds to the box element in the index file                varbox=$ (". Box"); //get the width of the box = = the width of the first box                varBoxwidth=box.eq (0). width (); //get the width of the box and see how many rows can be placed .                //The number of rows is equal to the width of the current browser window divided by the width of each box, note that dividing the resulting number is a decimal, to convert it to an integer                varNum=math.floor ($ (window). Width ()/boxwidth);//define an array to host the height of all the boxes in the storage column, and then get the smallest height in a row of boxes                varBoxarr=[]; //get the height of each box after traversing boxBox.each (function(Index,value) {//The value here is the box object                    //Console.log (index);                    //Create a box height to get the height of each box                    varboxheight=Box.eq (index). Height (); //then judge: Store the height of each image in the first row, and store it in an array                    if(index<num) {Boxarr[index]=Boxheight; //Console.log (boxheight);}Else{                        //after getting to the height, the second row begins to be placed, first to get to the smallest height of the picture                        varMinboxheight=math.min.apply (NULL, Boxarr); //Console.log (minboxheight);                        //set the position of the picture to get the smallest picture in the first row                        varboxminindex=$.inarray (Minboxheight,boxarr); //Console.log (boxminindex);                        //Next, place it through the position .                        //Console.log (value);                        //Get Object$ (value). css ({"Position": "Absolute",                            "Top": Minboxheight,"Left": Box.eq (boxminindex). Position (). Left}) //and then you have to remember the height of the picture.boxarr[boxminindex]+=Box.eq (index). Height (); }                })                            }        </script>

jquery for waterfall Flow