1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Waterfall代码</title>
6 </head>
7 <body>
8 <style type="text/css">
9 .wf-main{
10 position: relative;
11 margin: 0 auto;
12 width: 990px;
13 overflow: hidden;
14 }
15 .wf-main .wf-cld{
16 position: absolute;
17 margin-bottom: 10px;
18 padding:5px 8px;
19 width: 214px;
20 left: -9999px;
21 top: -9999px;
22 line-height:18px;
23 border: 1px solid #999;
24 border-radius: 4px;
25 background-color: #ccc;
26 overflow: hidden;
27 }
28 .wf-cld .inner{
29 position: absolute;
30 left: -9999px;
31 top: -9999px;
32 margin-bottom: 5px;
33 width: 73px;
34 overflow: hidden;
35 border: 1px solid #f00;
36 border-radius: 3px;
37 }
38 .wf-cld .title{
39 margin: 0 0 5px;
40 padding: 5px;
41 width: 63px;
42 color: #f00;
43 font-size: 14px;
44 }
45 </style>
46 <div class="wf-main" id="wf-main">
47 <div class="wf-cld"><h2 style="color:#f50">1、瀑布流</h2></div>
48 <div class="wf-cld">2<br>2</div>
49 <div class="wf-cld">3<br>4<br>4</div>
50 <div class="wf-cld">4<br>4<br>4<br>4</div>
51 <div class="wf-cld">5<br>4<br>4<br>4<br>4</div>
52 <div class="wf-cld">6<br>4<br>4<br>4<br>4<br>4</div>
53 <div class="wf-cld">7<br>4<br>4<br>4<br>4<br>4<br>4</div>
54 <div class="wf-cld">8<br>4<br>4<br>4<br>4<br>4<br>4<br>4</div>
55 <div class="wf-cld">9<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4</div>
56 <div class="wf-cld">10<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4</div>
57 <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>
58 <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>
59 <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>
60 <div class="wf-cld" id="wf-inner">
61 <h2 class="inner title">21、内部瀑布流</h2>
62 <div class="inner">21-1<br>1</div>
63 <div class="inner">21-2</div>
64 <div class="inner">21-3</div>
65 <div class="inner">21-4</div>
66 <div class="inner">21-5<br></div>
67 <div class="inner">21-6</div>
68 <div class="inner">21-7</div>
69 <div class="inner">21-8</div>
70 <div class="inner">21-9</div>
71 </div>
72 <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>
73 <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>
74 <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>
75 <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>
76 <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>
77 <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>
78 <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>
79 <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>
80 <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>
81 <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>
82 </div>
83 <script type="text/javascript">
84 function Waterfall(param){
85 this.id = typeof param.container == 'string' ? document.getElementById(param.container) : param.container;
86 this.colWidth = param.colWidth;
87 this.colCount = param.colCount || 4;
88 this.cls = param.cls && param.cls != '' ? param.cls : 'wf-cld';
89 this.init();
90 }
91 Waterfall.prototype = {
92 getByClass:function(cls,p){
93 var arr = [],reg = new RegExp("(^|\\s+)" + cls + "(\\s+|$)","g");
94 var nodes = p.getElementsByTagName("*"),len = nodes.length;
95 for(var i = 0; i < len; i++){
96 if(reg.test(nodes[i].className)){
97 arr.push(nodes[i]);
98 reg.lastIndex = 0;
99 }
100 }
101 return arr;
102 },
103 maxArr:function(arr){
104 var len = arr.length,temp = arr[0];
105 for(var ii= 1; ii < len; ii++){
106 if(temp < arr[ii]){
107 temp = arr[ii];
108 }
109 }
110 return temp;
111 },
112 getMar:function(node){
113 var dis = 0;
114 if(node.currentStyle){
115 dis = parseInt(node.currentStyle.marginBottom);
116 }else if(document.defaultView){
117 dis = parseInt(document.defaultView.getComputedStyle(node,null).marginBottom);
118 }
119 return dis;
120 },
121 getMinCol:function(arr){
122 var ca = arr,cl = ca.length,temp = ca[0],minc = 0;
123 for(var ci = 0; ci < cl; ci++){
124 if(temp > ca[ci]){
125 temp = ca[ci];
126 minc = ci;
127 }
128 }
129 return minc;
130 },
131 init:function(){
132 var _this = this;
133 var col = [],//列高
134 iArr = [];//索引
135 var nodes = _this.getByClass(_this.cls,_this.id),len = nodes.length;
136 for(var i = 0; i < _this.colCount; i++){
137 col[i] = 0;
138 }
139 for(var i = 0; i < len; i++){
140 nodes[i].h = nodes[i].offsetHeight + _this.getMar(nodes[i]);
141 iArr[i] = i;
142 }
143
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;
149 }
150
151 _this.id.style.height = _this.maxArr(col) + "px";
152 }
153 };
154 new Waterfall({
155 "container":"wf-main",
156 "colWidth":244,
157 "colCount":4
158 });
159 </script>
160 </body>
161 </html>
