首页 > 代码库 > JS案例之7——瀑布流布局(2)
JS案例之7——瀑布流布局(2)
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>
JS案例之7——瀑布流布局(2)
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。