JS案例之7——瀑布流布局(2)

浏览数：24 / 时间：2015年06月09日

 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>