JS Waterfall Stream

1$ (document). Ready (function(){2     /*3 * <div class= "Layoutcontainer" style= "position:relative" >4 * <div class= "news-list" style= "Position:absolute" ></div>5 * <div class= "news-list" style= "Position:absolute" ></div>6 * </div>7 * First, define the variables8 * cwidth: Container width9 * Dwidth:div WidthTen * Number of Num:div One * Get the number of each line: M A * interval between each div: Lwidth - * Interval between the top and bottom of each div: mheight - * Get each left, set: Left, respectively; the * Record the height of each column, array array:lheight - * Record div total height. Mainheight - * Function: - * getheight (): Returns the number of columns with the shortest height +      *                      -      * */ +cwidth=$ (". Layoutcontainer"). width (); Adwidth=$ (". News-list"). width (); atnum=$ (". News-list"). length; -m= Math.floor (cwidth/dwidth); -Lwidth= (cwidth-dwidth*m)/(M-1); -Mheight=15; -Mainheight=0; -     varlheight=NewArray (); in      for(u=0;u<m;u++){ -Lheight[u]=0; to     } +     functiongetheight () { -lr=0;//The first few columns of 0,1,2,3,4 ... theLh=lheight[0]; *          for(i=0;i<m;i++){ $             if(lheight[i]<LH) {Panax NotoginsengLr=i; -Lh=Lheight[i]; the             } +         } A         returnLR; the     } +     functionsetaddr (n) { -X=getheight ();//This can be learned that Div css.left= (lwidth+dwidth) *x $div=$ (". News-list"). EQ (n);  $xleft= (lwidth+dwidth) *x; - //Console.log (xleft); -Xtop=lheight[x]+mheight; the //Console.log (xtop); -Lheight[x]=xtop+div.innerheight (+15);Wuyi //Console.log (Div.outerheight ()); theMainheight=lheight[x]>mainheight?Lheight[x]:mainheight; -Div.css ({"Left": xleft+ "px", "Top": xtop+ "px"}); Wu$ (". Layoutcontainer"). Height (mainheight); -     } AboutWindow.onload=function(){ $          for(j=0;j<num;j++){ - Setaddr (j); -         } -     } A});

Idea: First, determine the current container can row a few columns-->m

Determine the distance between each div in the current page-->lwidth

Set array, number of columns the height of each column is now-->lheight

Keep track of the height of the current page-->mainheight

Start with the first internal Div set position-->setaddr ()--

GetHeight (): Returns the number of columns with the shortest height
xleft= (lwidth+dwidth) * x;

--Calculate the top:xtop=lheight[x]+mheight of this div;

-Update height, mainheight

-Update the height of this line: Lheight[x]

JS Waterfall Stream