瀑布流佈局實現總結

　　瀑布流最先出如今Pinterest上。

　　而後在國內大大小小的網站上瘋狂流行。花瓣，美麗說，Mark之，蘑菇街，點點網，以及淘寶最新上線的「哇哦」 等等。

　　這種佈局適合於小數據塊，每一個數據塊內容相近且沒有側重。一般，隨着頁面滾動條向下滾動，這種佈局還會不斷加載數據塊並附加至當前尾部。因此，咱們給這樣的佈局起了一個形象的名字 — 瀑布流式佈局。

1、總覽

淘寶UED介紹：http://ued.taobao.com/blog/2011/09/waterfall/

　

2、實現思路

(1) 傳統多列浮動。即 蘑菇街和哇哦 採用的方式，以下圖所示:

• 各列固定寬度，而且左浮動；
• 一列中的數據塊爲一組，列中的每一個數據塊依次排列便可；
• 更多數據加載時，須要分別插入到不一樣的列上；
• 線上例子。

優勢:

　  1. 佈局簡單，應該說沒啥特別的難點；

　　2. 不用明確知道數據塊高度，當數據塊中有圖片時，就不須要指定圖片高度。

缺點:

　　1.列數固定，擴展不易，當瀏覽器窗口大小變化時，只能固定的x列，若是要添加一列，很難調整數據塊的排列；

　　 2. 滾動加載更多數據時，還要指定插入到第幾列中，仍是不方便。

(2) CSS3 定義。W3C 中有講述關於多列布局的文檔，排列出來的樣子:

• 由 chrome/ff 瀏覽器直接渲染出來，能夠指定容器的列個數，列間距，列中間邊框，列寬度來實現；

優勢:

　　1.直接 CSS 定義，最方便了；

　　2.擴展方便，直接往容器裏添加內容便可。

缺點:

　　1.只有高級瀏覽器中才能使用並且，更適合於文字多欄排列；

　　2.還有一個缺點，他的數據塊排列是從上到下排列到必定高度後，再把剩餘元素依次添加到下一列，這個本質上就不同了；

(3) 絕對定位。即 Pinterest ，Mark之，KISSY 採用的方式:

　　可謂是最優的一種方案，方便添加數據內容，窗口變化，列數/數據塊都會自動調整；

　　線上例子。

缺點:

　　1. 須要實現知道數據塊高度，若是其中包含圖片，須要知道圖片高度；

　　2. JS 動態計算數據塊位置，當窗口縮放頻繁，可能會狂耗性能。

3、代碼實現

首選：masonry 插件   http://masonry.desandro.com/   Masonry是一 個用來佈局的jQuery插件,國內外大量網站在使用它實現瀑布流佈局，Pinterest 使用的也是此方法，簡潔易用，代碼量少，這真是極好的。

其餘方法：  1. 淘寶kissy waterfall  http://docs.kissyui.com/docs/html/demo/component/waterfall/ ；

　　　　　  2. jquery.waterfall 插件；

　　　　  　3. 藍色夢想——Ublue jQuery Waterfall，準備本身動手嘗試一下的同窗，能夠參考借鑑一下。 

masonery 最好在github上下載 https://github.com/desandro/masonry/tree/gh-pages  有masonry.js  和 jquery.masonry.js，在此咱們使用Jquery版。

【插件參數】

itemSelector     class選擇器,默認'.item'
columnWidth     一列的寬度
isAnimated     使用jquery的佈局變化,默認true
animationOptions     animate屬性漸變效果(Object { queue: false, duration: 500 })
gutterWidth     列的間隙 Integer
isFitWidth     適應寬度Boolean
isResizableL     是否可調整大小 Boolean
isRTL     使用從右到左的佈局 Boolean

example.1

js代碼：

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.masonry.min.js"></script>
<script>
$(function(){
    $('.container').masonry({
        itemSelector : '.item'    
    });
});
</script>

css 代碼：  

.container {
  background: #EEE;
  margin-bottom: 20px;
  position: relative;
}
.item {
  width:182px;
  padding:4px;
  float: left;
  border: 1px solid;
  background: #09F;
}
.h1{height:120px;}
.h2{height:150px;}
.h3{height:240px;}
.h4{height:330px;}

html 代碼：

    <div class="container">
        <div class="item h2"></div>
        <div class="item h4"></div>
        <div class="item h1"></div>
        <div class="item h1"></div>
        <div class="item h3"></div>
        <div class="item h4"></div>
        <div class="item h2"></div>
        <div class="item h2"></div>
        <div class="item h1"></div>
        <div class="item h1"></div>
        <div class="item h1"></div>
        <div class="item h3"></div>
    </div>

效果：

example.2  排列圖片 

使用imagesLoaded函數在圖像加載完成後纔開始排列圖片。

 jquery.masonry.js中內置了imagesLoaded Plugin，咱們能夠結合使用此功能。

<script>
$(function(){
     var $container = $('#container');

    $container.imagesLoaded( function(){
            $container.masonry({
                itemSelector : '.item'
        });
    });
});
</script>

 

三、滾動動畫

<script>
$(function(){
     var $container = $('#container');

    $container.imagesLoaded( function(){
        $container.masonry({
            itemSelector : '.item',
            isAnimated : true
        });
    });
});
</script>

/* CSS3 實現動畫*/

#container,
.item {
    -webkit-transition-duration: 0.7s;
    -moz-transition-duration: 0.7s;
    -ms-transition-duration: 0.7s;
    -o-transition-duration: 0.7s;
    transition-duration: 0.7s;
}

#container {
    -webkit-transition-property: height, width;
    -moz-transition-property: height, width;
    -ms-transition-property: height, width;
    -o-transition-property: height, width;
    transition-property: height, width;
}

.item {
    -webkit-transition-property: left, right, top;
    -moz-transition-property: left, right, top;
    -ms-transition-property: left, right, top;
    -o-transition-property: left, right, top;
    transition-property: left, right, top;
}

四、固定寬度

　　添加css樣式

#container {
    width: 1000px;
}