▓▓▓▓▓▓ 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