javascript-for simple waterfall flow

Directly on the code:

<style>*{margin:0; padding:0;}. Waterfall_item{border:solid 3px #ccc; box-shadow:1px 1px 3px #eee; border-radius:8px;font:normal 12px/22px ' Microsoft Yahei '; text-align:center;padding:20px 0;overflow:hidden;} </style><script>/** Waterfall Flow Analysis: Waterfall flow is the main solution to each column of the location of the elements, as well as the height of the column *//** Waterfall Flow analysis: Waterfall flow is the main solution to each column of the location of the elements, as well as the height of the column to determine a row of several columns, The size of the interval between each element. Gets the height of each element, adds it to the panel, and determines the height property of each column: panel//artboard items//The number of items to load colnum//columns col=[]//column array colleft//left spacing coltop//up spacing method: init// Initialize refresh//refresh setcolnum//Set the number of columns setcolleft//set the left pitch setcoltop//set the spacing on paint//add to the outer frame refreshpanel//Update external artboards */function GetStyle (o,name) {if (Document.defaultview&&document.defaultview.getcomputedstyle) return Document.defaultView.getComputedStyle (o,null) [Name];elsereturn o.currentstyle[name];} function Waterfall (opts) {this.init (opts);} Waterfall.prototype={constructor:waterfall,init:function (opts) {this.panel=opts.panel| | document.body;//Artboard this.items=opts.items| | [];//items to load this.colnum=opts.colnum| | 3;//number of Columns This.colleft=opts.colleft| | 5;//Left Pitch this.coltop=opts.coltop| | 5;//onPitch This._updated=false;this.col=[];this.initcol (); This.newitems=this.items;this.draw (This.newItems);},initCol: function () {//Initialize column array for (Var i=0,len=this.colnum;i<len;i++) {this.col[i]={height:0,//height itemnum:0,//number of items idx:i, Count:0}}},refresh:function (type) {var items;if (this._updated) {if (type!== ' append ') {this.initcol (); This.panel.innerhtml= '; items=this.items;} Else{items=this.newitems;} This.draw (items);}},_setupdate:function (updated) {if (this._updated!=updated) {This._updated=updated;}},setcolnum : function (num) {if (Num==this.colnum) return;this._setupdate (true); This.colnum=num;},setcolleft:function (LeftSpan {This._setupdate (true); This.colleft=leftspan;},setcoltop:function (Topspan) {this._setupdate (true); This.colLeft =leftspan;},additems:function (items) {this._setupdate (true); This.items=this.items.concat (items); this.newitems= Items;},draw:function (items) {var that=this,i=0,p=this.panel,len=items.length;for (; i<len;i++) {var r=Math.floor (i/this.colnum); var w=parseint (GetStyle (p, ' width ')/this.colnum-thiS.colleft;var Curcol=this.getminheightcol (); var c=curcol.idx;var t=curcol.height+this.coltop;var l=c* (w+ This.colleft) +this.colleft;var Oitem=this.createitem (W,l,t,items[i]);p. appendchild (oitem); var itemH= oitem.offsetheight;curcol.height=curcol.height+itemh+this.coltop;curcol.count++;p. style.height=curCol.height+ ' PX ';}},createitem:function (w,l,t,html) {var oitem=document.createelement (' div '); oitem.innerhtml=html;oitem= oitem.firstchild;oitem.style.position= ' absolute '; oitem.style.width=w+ ' px '; oitem.style.left=l+ ' px '; o item.style.top=t+ ' px '; return oitem;},getminheightcol:function () {var idx=0,minner=this.col[idx].height;for (var i=0 , len=this.colnum;i<len;i++) {if (minner>this.col[i].height) {minner=this.col[i].height;idx=i;}} return THIS.COL[IDX];}} </script><div style= "margin:0 Auto" > column: <input type= "text" value= ' 3 ' id= "Col_num"/><button id= " Refresh "> Refreshes </button></div><div id=" Response_flow "class=" Response_flow "style=" width:1000px; position:relative; " ></div><script>//test Case var items=["<div class= ' waterfall_item ' ><br/>asdfasdfasdf </div> "," <div class= ' Waterfall_item ' >asdfasdfasdf<br/>asdfasdfasdf<br/></div> "," & Lt;div class= ' Waterfall_item ' >asdfasdfasdf</div> ', ' <div class= ' Waterfall_item ' >asdfasdfasdf<br />asdfasdfasdf<br/></div> "," <div class= ' waterfall_item ' ><br/>asdfasdfasdf </div> "," <div class= ' waterfall_item ' ><br/>asdfasdfasdf</div> ', ' <div class= ' Waterfall_item ' &GT;ASDFASDFASDF&LT;BR/>asdfasdfasdf<br/></div> "," <div class= ' Waterfall_item ' >aSdfasdfasdf</div> "," <div class= ' Waterfall_item ' >asdfasdfasdf<br/>asdfasdfasdf<br/></ Div> "," <div class= ' waterfall_item ' ><br/>asdfasdfasdf</div> ', ' <div class= ' Waterfall_item ' > <br />asdfasdfasdf</div> "," <div class= ' Waterfall_item ' >asdfasdfasdf<br/>asdfasdfasdf<br/ ></div> "," <div class= ' Waterfall_item ' >asdfasdfasdf</div> "," <div class= ' Waterfall_item ' &GT;ASDFASDFASDF&LT;BR/>asdfasdfasdf<br/></div> "," <div class= ' waterfall_item ' ><br/> Asdfasdfasdf</div> "," <div class= ' waterfall_item ' ><br/>asdfasdfasdf </div> "," <div class= ' Waterfall_item ' >asdfasdfasdf<br/>asdfasdfasdf<br/></div> "," & Lt;div class= ' Waterfall_item ' >asdfasdfasdf</div> ', ' <div class= ' Waterfall_item ' >asdfasdfasdf<br />asdfasdfasdf<br/></div> "," <div class= ' waterfall_item ' ><br/>asdfasdfasdf </div> "," <div class= ' waterfall_item ' ><br/>asdfasdfasdf</div> ', ' <div class= ' Waterfall_item ' &GT;ASDFASDFASDF&LT;BR/>asdfasdfasdf<br/></div> "," <div class= ' Waterfall_item ' >asdfasdfasdf </div> "," <div class= ' Waterfall_item ' >asdfasdfasdf<br/>asdfasdfasdf<bR/></div> "," <div class= ' waterfall_item ' ><br/>asdfasdfasdf</div> ', ' <div class= ' Waterfall_item ' ><br/>asdfasdfasdf</div> ', ' <div class= ' waterfall_item ' >asdfasdfasdf<br/> Asdfasdfasdf<br/></div> "," <div class= ' Waterfall_item ' >asdfasdfasdf</div> "," <div class = ' Waterfall_item ' >asdfasdfasdf<br/>asdfasdfasdf<br/></div> ', ' <div class= ' Waterfall_item ' > <br/>asdfasdfasdf</div> "," <div class= ' waterfall_item ' ><br/>asdfAsdfasdf</div> "," <div class= ' Waterfall_item ' >asdfasdfasdf<br/>asdfasdfasdf<br/></div > "," <div class= ' Waterfall_item ' >asdfasdfasdf</div> "," <div class= ' Waterfall_item ' > ASDFASDFASDF&LT;BR/>asdfasdfasdf<br/></div> "," <div class= ' waterfall_item ' ><br/> Asdfasdfasdf</div> "," <div class= ' waterfall_item ' ><br/>asdfasdfasdf</div> ', ' <div class= ' Waterfall_item ' >asdfasdfasdf<br/>asdfasdfasdf<br/></div> ', ' <div class= ' Waterfall_item ' >asdfasdfasdf</div> "," <div class= ' waterfall_item ' >asdfasdfasdf<br/>asdfasdfasdf<br/> </div> "," <div class= ' waterfall_item ' ><br/>asdfasdfasdf</div> ', ' <div class= ' waterfall_item ' >asdfasdfasdf<br/> Asdfasdfasdf<br/></div> "," <div class= ' Waterfall_item ' >asdfasdfasdf<br/>asdfasdfasdf< BR/></div> "]var colnum;var Refreshbtn=document.getelementbyid (' refresh '); var panel=   document.getElementById (' Response_flow '); var flow=new waterfall ({panel:panel, Items:items, colleft:20, topLeft:20 })//append var newitems=["<div class= ' Waterfall_item ' >asdfasdfasdf<br/>asdfasdfasdf<br/></div > "," <div class= ' waterfall_item ' ><br/>asdfasdfasdf</div> ', ' <div class= ' waterfall_item ' ><br/>asdfasdfasdf</div> ', ' <div class= ' Waterfall_item ' >asdfasdfasdf<br/>asdfasdfasdf<br/></div> "," &Lt;div class= ' Waterfall_item ' >asdfasdfasdf</div> ', ' <div class= ' Waterfall_item ' >asdfasdfasdf<br />asdfasdfasdf<br/></div> "," <div class= ' waterfall_item ' ><br/>asdfasdfasdf</div> ', ' <div class= ' Waterfall_item ' >asdfasdfasdf<br/>asdfasdfasdf<br/></div> ', ' <div class= ' waterfall _item ' >asdfasdfasdf<br/>asdfasdfasdf<br/></div> "];refreshbtn.onclick=function () {colNum= document.getElementById (' Col_num '). Value;flow.setcolnum (Colnum); Flow.refresh ();} var toop=200;var loadnum=1;var Maxnum=5;var origintop= Document.body.scrollheight-document.documentelement.clientheight;window.onscroll=function () {var to= Document.body.scrolltop;if (Loadnum>maxnum) return;if (to>loadnum*toop) {loadnum++;flow.additems (NewItems) Flow.refresh (' append ')}}window.onresize=function () {flow._setupdate (true); Flow.refresh ();} </scripT> 

See the results:

javascript-for simple waterfall flow