标签：des style blog http color os io for ar
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>
标签：des style blog http color os io for ar
原文地址：http://www.cnblogs.com/zourong/p/3930002.html
