JS瀑布流佈局模式(2)

時間 2020-09-20

原文原文鏈接

這個例子與上一篇相似，惟一的區別是排序的方式有差異。上一篇是在高度最小的列裏插入內容，這個案例是按順序放置內容。html

兩種方法各有優缺點。第一種須要在圖片內容加載完成的狀況下有效，各個列的圖高度差別不大。這個例子不須要在window.onload以後執行，直接計算每列的索引，按照順序一列一列的放置，在圖大小不一樣的時候列的高度可能會有很大的差距。用下面的圖作說明。app

說明：佈局

上一個案例以下圖：ui

源代碼：this

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8;">
<title>waterfall佈局</title>
<meta name="author" content="rainna" />
<meta name="keywords" content="rainna's js lib" />
<meta name="description" content="waterfall佈局" />
<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;}
</style>
</head>

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

<script>
var waterFall = {
    content:document.getElementById('content'),    //存放內容的容器
    list:document.getElementById('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<l;i++){
            html += '<li style="width:'+ self.colWidth +'px;"></li>';
        }
        self.list.innerHTML = html;
        
        self.column = self.list.getElementsByTagName('li');
    },
    
    //填充內容
    setCont:function(cnt){
        var self = this;
        self.index = self.index%self.colNum || 0;   //將要放置內容的列的索引，默認從0開始
        self.column[self.index].appendChild(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();
</script>
</body>
</html>