转载地址: http://www.oschina.net/code/snippet_114440_10309
自pinterest网站爆红以来,国内一度掀起“仿PIN”狂潮,诸如花瓣、蘑菇街等等。正是如此,“瀑布流”式布局受到广大网民的青睐。众多知名JS库,也相继出现“瀑布流”布局插件,譬如jQuery的Masonry插件、KISSY的waterfall插件等。今天闲来无聊,我也自己动手弄了段原生JS代码,实现了简单的“瀑布流”布局效果,当然肯定不能和以上那些优秀插件相提并论,有兴趣的朋友,可以去看看,希望能带给你或多或少的收获。
效果预览: http://www.seejs.com/waterfall/
[代码] [JavaScript]代码
004 | <meta charset= "utf-8" > |
005 | <title>Waterfall代码</title> |
008 | <style type= "text/css" > |
023 | border: 1px solid #999; |
025 | background-color: #ccc; |
035 | border: 1px solid #f00; |
046 | <div class= "wf-main" id= "wf-main" > |
047 | <div class= "wf-cld" ><h2 style= "color:#f50" >1、瀑布流</h2></div> |
048 | <div class= "wf-cld" >2<br>2</div> |
049 | <div class= "wf-cld" >3<br>4<br>4</div> |
050 | <div class= "wf-cld" >4<br>4<br>4<br>4</div> |
051 | <div class= "wf-cld" >5<br>4<br>4<br>4<br>4</div> |
052 | <div class= "wf-cld" >6<br>4<br>4<br>4<br>4<br>4</div> |
053 | <div class= "wf-cld" >7<br>4<br>4<br>4<br>4<br>4<br>4</div> |
054 | <div class= "wf-cld" >8<br>4<br>4<br>4<br>4<br>4<br>4<br>4</div> |
055 | <div class= "wf-cld" >9<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4</div> |
056 | <div class= "wf-cld" >10<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4</div> |
057 | <div class= "wf-cld" >18<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4</div> |
058 | <div class= "wf-cld" >19<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4</div> |
059 | <div class= "wf-cld" >20<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4</div> |
060 | <div class= "wf-cld" id= "wf-inner" > |
061 | <h2 class= "inner title" >21、内部瀑布流</h2> |
062 | <div class= "inner" >21-1<br>1</div> |
063 | <div class= "inner" >21-2</div> |
064 | <div class= "inner" >21-3</div> |
065 | <div class= "inner" >21-4</div> |
066 | <div class= "inner" >21-5<br></div> |
067 | <div class= "inner" >21-6</div> |
068 | <div class= "inner" >21-7</div> |
069 | <div class= "inner" >21-8</div> |
070 | <div class= "inner" >21-9</div> |
072 | <div class= "wf-cld" >22<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4</div> |
073 | <div class= "wf-cld" >23<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4</div> |
074 | <div class= "wf-cld" >24<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4</div> |
075 | <div class= "wf-cld" >11<br>2<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4</div> |
076 | <div class= "wf-cld" >12<br>2<br>2<br>3<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4</div> |
077 | <div class= "wf-cld" >13<br>4<br>4<br>3<br>3<br>1<br>2<br>4<br>4<br>4<br>4<br>4<br>4</div> |
078 | <div class= "wf-cld" >14<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4</div> |
079 | <div class= "wf-cld" >15<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4</div> |
080 | <div class= "wf-cld" >16<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4</div> |
081 | <div class= "wf-cld" >17<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4</div> |
083 | <script type= "text/javascript" > |
084 | function Waterfall(param){ |
085 | this .id = typeof param.container == 'string' ? document.getElementById(param.container) : param.container; |
086 | this .colWidth = param.colWidth; |
087 | this .colCount = param.colCount || 4; |
088 | this .cls = param.cls && param.cls != '' ? param.cls : 'wf-cld' ; |
091 | Waterfall.prototype = { |
092 | getByClass: function (cls,p){ |
093 | var arr = [],reg = new RegExp( "(^|\\s+)" + cls + "(\\s+|$)" , "g" ); |
094 | var nodes = p.getElementsByTagName( "*" ),len = nodes.length; |
095 | for ( var i = 0; i < len; i++){ |
096 | if (reg.test(nodes[i].className)){ |
103 | maxArr: function (arr){ |
104 | var len = arr.length,temp = arr[0]; |
105 | for ( var ii= 1; ii < len; ii++){ |
112 | getMar: function (node){ |
114 | if (node.currentStyle){ |
115 | dis = parseInt(node.currentStyle.marginBottom); |
116 | } else if (document.defaultView){ |
117 | dis = parseInt(document.defaultView.getComputedStyle(node, null ).marginBottom); |
121 | getMinCol: function (arr){ |
122 | var ca = arr,cl = ca.length,temp = ca[0],minc = 0; |
123 | for ( var ci = 0; ci < cl; ci++){ |
135 | var nodes = _this.getByClass(_this.cls,_this.id),len = nodes.length; |
136 | for ( var i = 0; i < _this.colCount; i++){ |
139 | for ( var i = 0; i < len; i++){ |
140 | nodes[i].h = nodes[i].offsetHeight + _this.getMar(nodes[i]); |
144 | for ( var i = 0; i < len; i++){ |
145 | var ming = _this.getMinCol(col); |
146 | nodes[i].style.left = ming * _this.colWidth + "px" ; |
147 | nodes[i].style.top = col[ming] + "px" ; |
148 | col[ming] += nodes[i].h; |
151 | _this.id.style.height = _this.maxArr(col) + "px" ; |
155 | "container" : "wf-inner" , |
161 | "container" : "wf-main" , |