Deep learning JS Waterfall Flow layout _javascript skills

This example for you to share the JS waterfall Flow Layout Learning materials for your reference, the specific contents are as follows

Features: equal width and unequal height.
Implementation mode: JAVASCRIPT/JQUERY/CSS3 a multiple-column layout.
Sample website: Petal NET--> classification

One, JS realization waterfall Flow

Index.html: Page structure

<! DOCTYPE html>  

LAYOUT.CSS: page element style

*{
  pdding:0;
  margin:0;
}
div#main{
  position:relative;
}
div.box{
  padding:15px 0 0 15px;
  Float:left;
}
div.pic{
  padding:10px;
  border:1px solid #ccc;
  border-radius:5px;
  box-shadow:0 0 5px #ccc;
}
. Pic img{
  Height:auto;
  width:165px;
}

Waterfall.js

Window.onload=function () {Waterfall (' main ', ' box '); Analog backend corresponding data json var dataint={"data": [{"src": "0.jpg"}, {"src": "1.jpg"}, {"src": "2.jpg"}, {"
    SRC ": 3.jpg"}, {"src": "4.jpg"}, {"src": "5.jpg"}, {"src": "6.jpg"}]} window.onscroll=function () {
     if (checkscrollslide) {//renders a block of data to the trailing VAR Oparent=document.getelementbyid ("main") of the current page;
       for (Var i=0;i<dataint.data.length;i++) {var obox=document.createelement ("div");
       Obox.classname= "box";
       Oparent.appendchild (Obox);
       var opic=document.createelement ("div");
       Opic.classname= "pic";
       Obox.appendchild (OPic);
       var img=document.createelement ("img");
       Img.setattribute ("src", dataint.data[i]);
       Img.src= "pic/" +DATAINT.DATA[I].SRC;
     Opic.appendchild (IMG); 
  dataint=null;//empties the data block to prevent infinite load waterfall (' main ', ' box '),//Layout rendering for new page elements}} function waterfall (Parent,box) { Take the class under main for all elements of box, Var oparent=document.getElementById (parent);
  var oboxs=getbyclass (Oparent,box);
  Console.log (oboxs.length);
  Calculates the number of columns (page width/box width) of the entire page displayed var Oboxw=oboxs[0].offsetwidth;
  Console.log (OBOXW);
  var cols=math.floor (DOCUMENT.DOCUMENTELEMENT.CLIENTWIDTH/OBOXW);
  Console.log (cols);
  Set Main's wide oparent.style.csstext= "width:" +oboxw*cols+ "px;margin:0 auto;"
    The Var harr=[];//holds an array of the height of each column for (Var i=0;i<oboxs.length;i++) {if (i<cols) {Harr.push (oboxs[i].offsetheight);
      }else{var minh=math.min.apply (Null,harr);//Get the current array minimum height value//console.log (MinH);
      var index=getminhindex (Harr,minh);//Get the index of the minimum height of the array//console.log (index);
      oboxs[i].style.position= "Absolute";//Will be followed by the absolute positioning of the picture oboxs[i].style.top=minh+ "px";
    oboxs[i].style.left=index*oboxw+ "px" to calculate the position of the new picture and assign a value harr[index]+=oboxs[i].offsetheight;//the height of the array column because a picture is added}
  Console.log (HARR); Gets the element function Getbyclass (parent,clsname) {var boxarr=new Array (),//Based on class to store all the Acquired class boxElement Oelements=parent.getelementsbytagname ("*");
      for (Var i=0;i<oelements.length;i++) {if (oelements[i].classname==clsname) {Boxarr.push (oelements[i]);
} return Boxarr;
    } function Getminhindex (Arr,val) {for (Var i=0;i<arr.length;i++) {if (arr[i]==val) {return i;
  Verify that the scroll bar loading block condition function checkscrollslide () {var Oparent=document.getelementbyid ("main") is available;
  var oboxs=getbyclass (oparent, "box");
  var lastboxh=oboxs[oboxs.length-1].offsettop+math.floor (OBOXS[OBOXS.LENGTH-1].OFFSETHEIGHT/2); var scrolltop=document.body.scrolltop| |
  document.documentelement.scrolltop;//hybrid mode and standard mode of scrolltop acquisition//console.log (scrolltop); var height=document.body.clientheight| | document.documentelement.clientheight;//mixed mode and Standard mode browser window height get return (lastboxh<scrolltop+height)? true:false;//
 Detects if the last box height is less than the scroll height + window height, returns a Boolean value}

  II, jquery       

$ (window). On ("Load", function () {Waterfall (' main ', ' pin ');
  var dataint={' 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 (' pin '). Appendto ($ ("#main"));
        var $oBox = $ (' <div> '). addclass (' box '). Appendto ($oPin);
      $ ('  '). attr (' src ', './images/' + $ (value). attr (' src ')). Appendto ($oBox);
      });
    Waterfall ();
  };

}
});
  /* parend Parent ID pin Element ID/function waterfall (parent,pin) {var $aPin = $ ("#main >div"); var ipinw = $aPin. EQ (0). width ();//////A block-box pin's wide var num = Math.floor ($ (window). Width ()/IPINW);//number of pins to hold in each row window width divided by The width of a block box is//oparent.style.csstext= ' width: ' +ipinw*num+ ' px;ma rgin:0 auto;

  /Set Parent Center style: Fixed width + automatic horizontal margin $ ("#main"). CSS ({' Width: ': ipinw * num, ' margin ': ' 0 auto '});

  var pinharr=[];//is used to store the height of the addition of all block boxes in each column. $aPin. eaCH (function (index, value) {var Pinh = $aPin. EQ (index). Height (); if (Index < num) {pinharr[index] = pinh;//num block pin in first line add first to array Pinharr}else{var MinH = Math.min.a
      Pply (null, Pinharr);//The minimum value in the array Pinharr minH var minhindex = $.inarray (MinH, Pinharr); $ (value). css ({' position ': ' absolute ', ' top ': MinH +, ' left ': $aPin. EQ (minhindex). Position (
      ). left});
The high + added apin[i] block box high pinharr[minhindex] = = $aPin. EQ (index). Height () + 15;//update the Liegau after adding a block box);
  function Checkscrollside () {var $aPin = $ ("#main >div"); var Lastpinh = $aPin. Last (0). offsettop + Math.floor ($aPin. Last (). Height ()/2);//create TRIGGER add block function waterfall () " The height: the last block of the distance from the top of the page + its own high half (implementation does not roll to start loading) var scrolltop = $ (window). scrolltop ()//Note resolve compatibility var Documenth = $ (document). h Eight ()//page height return (Lastpinh < scrolltop + documenth)?
 true:false;//returns True when the specified height is reached, triggering the waterfall () function}

Three, CSS multi-column layout

. container{
  -webkit-column-width:160px;
  -moz-column-width:160px; 
   -webkit-column-gap:5px;
   -moz-column-gap:5px;
}


/* Data Block Bricks

/* container div{width:160px;
        MARGIN:4PX 0;}

"CSS3 and JS implementation method comparison"
--CSS3 Way--
1: Do not need to calculate, the browser automatic calculation, just set 1 columns wide, high performance
2: The width of the width of the browser to change the size of the user experience is not good;
3: The picture sort arranges in the vertical order, disrupts the picture display order
4. Picture loading or need JS
--js Way--
JS implementation of the waterfall stream does not have the above disadvantages, but the performance is relatively poor!

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.