1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" Content="text/html; charset=utf-8;">
5 <title>waterfall布局</title>
6 <meta name="author" content="rainna" />
7 <meta name="keywords" content="rainna‘s js lib" />
8 <meta name="description" content="waterfall布局" />
9 <style>
10 *{margin:0;padding:0;}
11 li{list-style:none;}
12
13 .list li{float:left;width:200px;min-height:10px;margin:0 0 0 20px;}
14 .list .item{margin:0 0 10px;}
15 .list img{display:block;}
16 </style>
17 </head>
18
19 <body>
20 <div class="content" id="content">
21 <div class="item"><img src="http://cued.xunlei.com/demos/publ/img/P_101.jpg" />01</div>
22 <div class="item"><img src="http://cued.xunlei.com/demos/publ/img/P_002.jpg" />02</div>
23 <div class="item"><img src="http://cued.xunlei.com/demos/publ/img/P_003.jpg" />03</div>
24 <div class="item"><img src="http://cued.xunlei.com/demos/publ/img/P_004.jpg" />04</div>
25 <div class="item"><img src="http://cued.xunlei.com/demos/publ/img/P_005.jpg" />05</div>
26 <div class="item"><img src="http://cued.xunlei.com/demos/publ/img/P_006.jpg" />06</div>
27 <div class="item"><img src="http://cued.xunlei.com/demos/publ/img/P_007.jpg" />07</div>
28 <div class="item"><img src="http://cued.xunlei.com/demos/publ/img/P_008.jpg" />08</div>
29 <div class="item"><img src="http://cued.xunlei.com/demos/publ/img/P_009.jpg" />09</div>
30 <div class="item"><img src="http://cued.xunlei.com/demos/publ/img/P_010.jpg" />10</div>
31 <div class="item"><img src="http://cued.xunlei.com/demos/publ/img/P_011.jpg" />11</div>
32 <div class="item"><img src="http://cued.xunlei.com/demos/publ/img/P_012.jpg" />12</div>
33 <div class="item"><img src="http://cued.xunlei.com/demos/publ/img/P_013.jpg" />13</div>
34 <div class="item"><img src="http://cued.xunlei.com/demos/publ/img/P_014.jpg" />14</div>
35 <div class="item"><img src="http://cued.xunlei.com/demos/publ/img/P_015.jpg" />15</div>
36 <div class="item"><img src="http://cued.xunlei.com/demos/publ/img/P_016.jpg" />16</div>
37 <div class="item"><img src="http://cued.xunlei.com/demos/publ/img/P_016.jpg" />17</div>
38 </div>
39 <div class="list" id="list"></div>
40
41 <script>
42 var waterFall = {
43 content:document.getElementById(‘content‘), //存放内容的容器
44 list:document.getElementById(‘list‘), //将要展示的列表容器
45
46 setOptions:function(options){
47 options = options || {};
48 this.colNum = options.num || 3; //显示的列数，默认显示3列
49 },
50
51 //构建列数
52 setColumn:function(){
53 var self = this;
54 var html = ‘‘;
55 for(var i=0,l=self.colNum;i<l;i++){
56 html += ‘<li></li>‘;
57 }
58 self.list.innerHTML = html;
59
60 self.column = self.list.getElementsByTagName(‘li‘);
61 },
62
63 //填充内容
64 setCont:function(cnt){
65 var self = this;
66 self.index = self.index%self.colNum || 0;
67 self.column[self.index].appendChild(cnt);
68 self.index ++;
69 if(!!self.content.children[0]){
70 self.setCont(self.content.children[0]);
71 }
72 },
73
74 init:function(options){
75 var self = this;
76 self.setOptions(options);
77 self.setColumn();
78 self.setCont(self.content.children[0]);
79 }
80 };
81
82 waterFall.init();
83 </script>
84 </body>
85 </html>
时间： 2024-08-01 22:46:51