原生JS实现美图瀑布流布局赏析

自pinterest网站爆红以来，国内一度掀起“仿PIN”狂潮，诸如花瓣、蘑菇街等等。正是如此，“瀑布流”式布局受到广大网民的青睐。众多知名JS库，也相继出现“瀑布流”布局插件，譬如jQuery的Masonry插件、KISSY的waterfall插件等。今天闲来无聊，我也自己动手弄了段原生JS代码，实现了简单的“瀑布流”布局效果，当然肯定不能和以上那些优秀插件相提并论，有兴趣的朋友，可以去看看，希望能带给你或多或少的收获。
1. js代码：

<！DOCTYPE html><html><head><meta charset="utf-"><title>Waterfall代码</title></head><body><style type="text/css">.wf-main{position: relative;margin: auto;width: px;overflow: hidden;}.wf-main .wf-cld{position: absolute;margin-bottom: px;padding:px px;width: px;left: -px;top: -px;line-height:px;border: px solid #;border-radius: px;background-color: #ccc;overflow: hidden;}.wf-cld .inner{position: absolute;left: -px;top: -px;margin-bottom: px;width: px;overflow: hidden;border: px solid #f;border-radius: px;}.wf-cld .title{margin:px;padding: px;width: px;color: #f;font-size: px;}</style><div class="wf-main" id="wf-main"><div class="wf-cld"><h style="color:#f">、瀑布流</h></div><div class="wf-cld"><br></div><div class="wf-cld"><br><br></div><div class="wf-cld"><br><br><br></div><div class="wf-cld"><br><br><br><br></div><div class="wf-cld"><br><br><br><br><br></div><div class="wf-cld"><br><br><br><br><br><br></div><div class="wf-cld"><br><br><br><br><br><br><br></div><div class="wf-cld"><br><br><br><br><br><br><br><br></div><div class="wf-cld"><br><br><br><br><br><br><br><br><br></div><div class="wf-cld"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><div class="wf-cld"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><div class="wf-cld"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><div class="wf-cld" id="wf-inner"><h class="inner title">、内部瀑布流</h><div class="inner">-<br></div><div class="inner">-</div><div class="inner">-</div><div class="inner">-</div><div class="inner">-<br></div><div class="inner">-</div><div class="inner">-</div><div class="inner">-</div><div class="inner">-</div></div><div class="wf-cld"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><div class="wf-cld"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><div class="wf-cld"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><div class="wf-cld"><br><br><br><br><br><br><br><br><br><br></div><div class="wf-cld"><br><br><br><br><br><br><br><br><br><br><br></div><div class="wf-cld"><br><br><br><br><br><br><br><br><br><br><br><br></div><div class="wf-cld"><br><br><br><br><br><br><br><br><br><br><br><br><br></div><div class="wf-cld"><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><div class="wf-cld"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><div class="wf-cld"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div></div><script type="text/javascript">function Waterfall（param）{this.id = typeof param.container == "string" ? document.getElementById（param.container） : param.container;this.colWidth = param.colWidth;this.colCount = param.colCount || ;this.cls = param.cls && param.cls ！= "" ? param.cls : "wf-cld";this.init（）;}Waterfall.prototype = {getByClass:function（cls,p）{var arr = [],reg = new RegExp（"（^|\s+）" + cls + "（\s+|$）","g"）;var nodes = p.getElementsByTagName（"*"）,len = nodes.length;for（var i = ; i < len; i++）{if（reg.test（nodes[i].className））{arr.push（nodes[i]）;reg.lastIndex = ;}}return arr;},maxArr:function（arr）{var len = arr.length,temp = arr[];for（var ii= ; ii < len; ii++）{if（temp < arr[ii]）{temp = arr[ii];}}return temp;},getMar:function（node）{var dis = ;if（node.currentStyle）{dis = parseInt（node.currentStyle.marginBottom）;}else if（document.defaultView）{dis = parseInt（document.defaultView.getComputedStyle（node,null）.marginBottom）;}return dis;},getMinCol:function（arr）{var ca = arr,cl = ca.length,temp = ca[],minc = ;for（var ci = ; ci < cl; ci++）{if（temp > ca[ci]）{temp = ca[ci];minc = ci;}}return minc;},init:function（）{var _this = this;var col = [],//列高iArr = [];//索引var nodes = _this.getByClass（_this.cls,_this.id）,len = nodes.length;for（var i = ; i < _this.colCount; i++）{col[i] = ;}for（var i = ; i < len; i++）{nodes[i].h = nodes[i].offsetHeight + _this.getMar（nodes[i]）;iArr[i] = i;}for（var i = ; i < len; i++）{var ming = _this.getMinCol（col）;nodes[i].style.left = ming * _this.colWidth + "px";nodes[i].style.top = col[ming] + "px";col[ming] += nodes[i].h;}_this.id.style.height = _this.maxArr（col） + "px";}};new Waterfall（{"container":"wf-inner","colWidth":,"colCount":,"cls":"inner"}）;new Waterfall（{"container":"wf-main","colWidth":,"colCount":}）;</script></body></html>

2. [图片] 瀑布流.jpg