JS瀑布流布局模式(2)

这个例子与上一篇类似，唯一的区别是排序的方式有差别。上一篇是在高度最小的列里插入内容，这个案例是按顺序放置内容。

两种方法各有优缺点。第一种需要在图片内容加载完成的情况下有效，各个列的图高度差异不大。这个例子不需要在window.onload之后执行，直接计算每列的索引，按照顺序一列一列的放置，在图大小不同的时候列的高度可能会有很大的差距。用下面的图做说明。

 

说明：

上一个案例如下图：

 

源代码：

DOCTYPE html>
<</span>html>
<</span>head>
<</span>meta http-equiv="Content-Type" Content="text/html; charset=utf-8;">
<</span>title>waterfall布局</</span>title>
<</span>meta name="author" content="rainna" />
<</span>meta name="keywords" content="rainna's js lib" />
<</span>meta name="description" content="waterfall布局" />
<</span>style>
*{margin:0;padding:0;}
li{list-style:none;}
p{margin:20px;}

.list li{float:left;min-height:10px;margin:0 0 0 20px;}
.list .item{margin:0 0 10px;}
.list img{display:block;width:100%;}

#content{display:none;}
</</span>style>
</</span>head>

<</span>body>
<</span>div class="content" id="content">
    <</span>div class="item"><</span>img src="http://cued.xunlei.com/demos/publ/img/P_101.jpg" />01</</span>div>
    <</span>div class="item"><</span>img src="http://cued.xunlei.com/demos/publ/img/P_102.jpg" />02</</span>div>
    <</span>div class="item"><</span>img src="http://cued.xunlei.com/demos/publ/img/P_103.jpg" />03</</span>div>
    <</span>div class="item"><</span>img src="http://cued.xunlei.com/demos/publ/img/P_104.jpg" />04</</span>div>
    <</span>div class="item"><</span>img src="http://cued.xunlei.com/demos/publ/img/P_105.jpg" />05</</span>div>
    <</span>div class="item"><</span>img src="http://cued.xunlei.com/demos/publ/img/P_106.jpg" />06</</span>div>
    <</span>div class="item"><</span>img src="http://cued.xunlei.com/demos/publ/img/P_107.jpg" />07</</span>div>
    <</span>div class="item"><</span>img src="http://cued.xunlei.com/demos/publ/img/P_108.jpg" />08</</span>div>
    <</span>div class="item"><</span>img src="http://cued.xunlei.com/demos/publ/img/P_109.jpg" />09</</span>div>
    <</span>div class="item"><</span>img src="http://cued.xunlei.com/demos/publ/img/P_110.jpg" />10</</span>div>
    <</span>div class="item"><</span>img src="http://cued.xunlei.com/demos/publ/img/P_111.jpg" />11</</span>div>
    <</span>div class="item"><</span>img src="http://cued.xunlei.com/demos/publ/img/P_112.jpg" />12</</span>div>
    <</span>div class="item"><</span>img src="http://cued.xunlei.com/demos/publ/img/P_113.jpg" />13</</span>div>
    <</span>div class="item"><</span>img src="http://cued.xunlei.com/demos/publ/img/P_114.jpg" />14</</span>div>
    <</span>div class="item"><</span>img src="http://cued.xunlei.com/demos/publ/img/P_115.jpg" />15</</span>div>
    <</span>div class="item"><</span>img src="http://cued.xunlei.com/demos/publ/img/P_116.jpg" />16</</span>div>
    <</span>div class="item"><</span>img src="http://cued.xunlei.com/demos/publ/img/P_117.jpg" />17</</span>div>
</</span>div>
<</span>div class="list" id="list"></</span>div>

<</span>script>
var waterFall = {
    content:document.getElementByIdx_x_x('content'),    //存放内容的容器
    list:document.getElementByIdx_x_x('list'),   //将要展示的列表容器

    setOptions:function(options){
        options = options || {};
        this.colNum = options.num || 3;   //显示的列数，默认显示3列 
        this.colWidth = options.width || 200;   //每列的宽度
    },
    
    //构建列数
    setColumn:function(){
        var self = this;
        var html = '';
        for(var i=0,l=self.colNum;i<</span>l;i++){
            html += '
'+ self.colWidth +'px;">
'; } self.list.innerHTML = html; self.column = self.list.getElementsByTagName_r('li'); }, //填充内容 setCont:function(cnt){ var self = this; self.index = self.index%self.colNum || 0; //将要放置内容的列的索引，默认从0开始 self.column[self.index].a(cnt); self.index ++; if(!!self.content.children[0]){ self.setCont(self.content.children[0]); } }, init:function(options){ var self = this; self.setOptions(options); self.setColumn(); self.setCont(self.content.children[0]); } }; waterFall.init(); </</span>script> </</span>body> </</span>html>