Partial HTML code
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Waterfall Flow</title> <!--<link rel= "stylesheet" type= "Text/css " href= "Css/pinterest.css" > - <!--//<script type= "Text/javascript" src= "Js/pinterest.js" ></script> - <!--<script type= "Text/javascript" src= "js/jquery.js" ></script>//<script type= "Text/javascript" src = "Js/pinterest_jquery.js" ></script> - <Linkrel= "stylesheet"type= "Text/css"href= "Css/pinterest_css3.css"></Head><Body> <DivID= "Pic_main"> <Divclass= "Pic_box"> <Divclass= "Pic"> <imgsrc= "Pinterest_img/1.jpg"alt= "Picture 1"> </Div> </Div> <Divclass= "Pic_box"> <Divclass= "Pic"> <imgsrc= "Pinterest_img/2.jpg"alt= "Picture 2"> </Div> </Div> </Div></Body></HTML>
Its CSS code
#pic_main {position:relative;}. pic_box{padding:15px 0 0 15px;float:left;}. pic{padding:10px;border:1px solid #ccc; border-radius:5px; box-shadow:0 0 5px #ccc;}. Pic Img{width:165px;height:auto;}
Native JS
window.onload=function () {Waterfall (' pic_main ', ' pic_box '); var dataint = {' Data ': [{' src ': ' 1.jpg '},{' src ': ' 4.jpg '},{' src ': ' 7.jpg '},{' src ': ' 17.jpg '}]}; Window.onscroll=function () {if (checkscrollslide) {var oparent = document.getElementById (' Pic_main '); for (Var i=0;i<Dataint. data.length;i++) {var OBox=document.createelement (' div '); Obox.classname= ' Pic_box '; Oparent.appendchild (OBox); var oPic=document.createelement (' div '); Opic.classname= ' pic '; Obox.appendchild (OPic); var oimg=document.createelement (' img '); oimg.src= ' pinterest_img/' +dataint.data[i].src; Opic.appendchild (OIMG); } waterfall (' Pic_main ', ' pic_box '); }}};function Waterfall (parent,box) {//Get parent element pic_main var oparent= document.getElementById (parent); //Get Picbox array var oboxs= Getbyclass (Oparent,box); //Calculate the width of each box var Oboxw=oboxs[0].offsetwidth; //Calculate the number of columns VAR cols=math.floor (DOCUMENT.DOCUMENTELEMENT.CLIENTWIDTH/OBOXW); //Set the width of main oparent.style.cssText= ' width: ' +cols*oboxw+ ' px;margin:50pxAuto '; The height of the first column Var Harray=[]; For (var i=0;i<oboxs.length;i++) {if (i<cols) {Harray.push (oboxs[i].offsetheight); }else{var MinH= Math.min.apply (Null,harray); var index= Getminindex (Harray,minh); oboxs[i].style.position= ' absolute '; Oboxs[i].style.top=minh+ ' px '; Oboxs[i].style.left=index*oboxw+ ' px '; harray[index]+=oboxs[i].offsetheight; }}}function Getbyclass (parent,classname) {var oelements=parent.getelementsbytagname (' * '); var boxarray=newArray (); for (var i=0;i<oelements.length;i++) { if (Oelements[i].classname==classname) { Boxarray.push (Oelements[i]); }} return Boxarray;} function Getminindex (array,min) {for (var i=0;i<array.length;i++) { if (min==array[i])return i; }}function checkscrollslide () {var oparent= document.getElementById (' Pic_main '); var oboxs= Getbyclass (oparent, ' pic_box '); var lastboxh=oboxs[length-1].offsettop+math.floor (OBOXS[LENGTH-1].OFFSETHEIGHT/2); var scrolltop= Document.body.scrollTop| | | document.documentElement.scrollTop; var height= document.body.clientheight| | Document.documentElement.clientHeight; return (lastboxh<scrolltop+height)? True:false;}
Jquery
$ (function () {waterfull (); var dataint = {' Data ': [{' src ': ' 1.jpg '},{' src ': ' 4.jpg '},{' src ': ' 7.jpg '},{' src ': ' 17.jpg '}]}; $ (window). On (' scroll ', function () {if (checkscrollslide) {$.each (Dataint.data,function (key,value) { var OBox = $ ('<Div>'). addclass (' Pic_box '). AppendTo ($ (' #pic_main ')); var opic=$ ('<Div>'). addclass (' pic '). AppendTo ($ (oBox)); var oimg=$ ('<img>'). attr (' src ', ' pinterest_img/' +$ (value). attr (' src ')). AppendTo ($ (oPic)); }); Waterfull (); } });}); function Waterfull () {var $boxs =$ (' #pic_main >div '); var boxw= $boxs. EQ (0). Outerwidth (); var cols = Math.floor ($ (window). Width ()/boxw); $ (' #pic_main '). Width (cols*boxw). CSS (' margin ', ' 0 auto '); var harr=[]; $boxs. Each (function (index,value) {var h= $boxs. EQ (index). Outerheight (); if (Index<cols) {Harr[index]=h; }else{var MinH=math.min.apply (Null,harr); var minhindex=$.inarray (Minh,harr); $ (value). css ({' position ': ' absolute ', ' top ': minh+ ' px ', ' Left ': minhindex*b oxw+ ' px '}); harr[minhindex]+= $boxs. EQ (index). Outerheight (); } });} function Checkscrollslide () {var $lastBox= $ (' Pic_#main>div '). Last (); var lasrboxdis= $lastBox. Offset (). Top+math.floor ($lastBox. OUTERHEIGHT/2); var scrolltop = $ (window). scrolltop (); var documenth = $ (window). Height (); Return (Lasrboxdis<scrolltop+documenth)? True:false;}
CSS3
Replace the previous CSS file with the CSS3 file
The waterfall stream formed by CSS3 cannot delay loading, or it can be deferred by JS.
#pic_main {-webkit-column-width:202px;-moz-column-width:202px;-o-column-width:202px;-ms-column-width:202px; column-width:202px;}. pic_box{padding:15px 0 0 15px;}. pic{padding:10px;border:1px solid #ccc; border-radius:5px; box-shadow:0 0 5px #ccc; width:165px;}. Pic Img{width:165px;height:auto;display:block;}
Three ways to achieve waterfall flow