mass Framework waterfall（瀑布流）插件

mass Framework的瀑布流UI控件，比上一版強大多了，從項目代碼中抽取出來的東西，實用性滿點。

瀑布流通常分為三部分，容器，欄柵，磚塊。磚頭里面基本上都塞着一張大圖，本來瀑布流就是以圖片來吸引眼球的。網上絕對大多數瀑布流都是通過絕對定位來設置磚頭的位置，但這也非常依賴於后端的支持，除去圖片的裁剪不說，一定要把圖片的大小預先給出來，然后前端要通過復雜的計算求得它在瀑布的top與left。萬一有一天PM要實現即時刪除某一磚頭的功能，那么這重排的計算量就大了。因此我的瀑布流有如下優點，浮動布局，對后端依賴極小。

本控件依賴於我的ejs模板，藉此將后端傳過來的JSON數據變成HTML數據，然后通過addTiles方法，將HTML數據變成元素節點。

由於是使用浮動布局，因此必須在瀑布的容器上添加clearfix這個著名的清除浮動類。具體定義如下：

           .clearfix:after {
                content: "";
                display: block;
                height: 0;
                clear: both;
                visibility: hidden;
            }
            .clearfix {zoom:1;}
        

參數：

settings

可選。用於配置控件對象。但當這個對象第二次調用它時， 只有當其第一個參數為字符串或對象才有效，這樣相當於調用其方法或重寫一些屬性。

返回值：

mass實例

settings的配置參數：

• img_expr:必需，磚塊里面的大圖的CSS表達式，用於在其加載完畢后添加下一個磚頭。
• col:必需，瀑布流里一共多少列(欄柵)。
• col_width:必需，欄柵的寬，注意其值必須比磚塊大。
• ejs_id:必需，磚塊的模板的ID值。
• callback:當所有磚頭添加完畢后觸發的回調，this指向UI實例。
• width:容器的寬，如果沒有指定，會直接取ui.target.width()作為它的值。
• interval:瀑布流會在window上綁定一個scroll事件, 這是滾輪每隔多少毫秒觸發一次回調。默認是20
• fade:是否使用淡入效果,如果是它會在添加時就把其透明值設為零,然后在scroll事件時,當滾動條拖到此磚塊的位置時就開始淡入動畫。默認為false.
• fade_time:淡入動畫的持續時間。默認是500。

生成的瀑布流擁有以下方法，都是使用$(expr).waterfall(method,args1,args2,args3)的形式進行調用，或者通waterfall("getUI")取得實例后再調用它們。

• addTiles(json): 添加一組磚塊，json這是一個對象數組。
• addTile(html, htmls ,index )，添加磚塊。html為htmls中的第一個元素，html是上面json數組用ejs模板經過轉換后成為一個字符串數組。index表示添加到第幾列中去。
• getShortestColumn(): 此方法通常是被addTile內部調用，求得最短的欄柵的索引值，以方便添加的新的磚塊。
• scroll(callback): 綁定scroll事件到window，如果fade為true，請務必執行此方法，即使不傳參也行。 callback在滾動時會多次觸發，傳參的參數並不一樣。一種情況是某一個磚塊出現到滾動條的拖動塊的位置時，這時傳參是el（磚塊，一個mass實例）。 另一種情況是用於判定滾動條是否接近頁面底部（放便使用AJAX加載下一批數據），傳參數據為rollHeight（滾過的距離）, pageHeight（頁面高）
• destory(): 銷毀實例，移除動態添加的節點。

生成的UI實例擁有以下屬性。

• parent: 即$(expr)。
• target:同上。
• cols: 動態生成的列的集合，一個對象數組，里面都是欄柵的mass實例。
• tiles: 動態生成的磚塊的集合，一個對象數組，里面都是磚塊的mass實例（內容參考ejs模板）

例子

            #waterfall{
                 width:1100px;
                 background: url("http://images.cnblogs.com/cnblogs_com/rubylouvre/363259/o_waterfall_bc.jpg") repeat scroll 0 0 transparent;
            }
            .clearfix:after {
                content: "";
                display: block;
                height: 0;
                clear: both;
                visibility: hidden;
            }
            .clearfix {zoom:1;}
            .tile{
                width:198px;
                padding:20px;
                margin-top:10px;
                border:1px solid #000;
                -moz-box-shadow:2px 2px 10px #c96;
                -webkit-box-shadow:2px 2px 10px #c96;
                box-shadow:2px 2px 10px #c96;
                background:#fff;
            }
            .tile .dis{
                width:198px;
            }
            .footer{
                height:24px;
                line-height:24px;
                background:gray;
            }
            

        <script type="text/tmpl" id="tile_tmpl">
                <div class="tile">
                     <img src="<&= @img_src &>" class="big_img" />
                     <div class="dis" ><&= @title &></div>
                </div>
        </script>
        <div id="waterfall" class="clearfix"></div>
        <div class="footer">這是頁腳</div>
            

         $.require("ready,more/waterfall",function(){
                var waterfall = $("#waterfall").waterfall({
                    ejs_id:"tile_tmpl",
                    width:1100,
                    col: 4,
                    img_expr:".big_img",
                    col_width:246,
                    fade: true,
                    callback: function(){
                        if(!this._first){//最開始的磚頭不需要透明
                            var tiles = this.tiles.splice(0,5);
                            for(var i = 0, el; el = tiles[i++];){
                                el.css("o",1)
                            }
                            this._first = true;
                        }
                    }
                }).waterfall("getUI");
    
                waterfall.addTiles( data.splice(0,10) )
                waterfall.scroll(function(rollHeight, pageHeight){
                    if(typeof rollHeight == "number"){
                        $.log(rollHeight +"  "+ pageHeight);
                        if(rollHeight + 30 > $(".footer").offset().top){
                            waterfall.addTiles( data.splice(0,10) );
                        }
                    }
                })
            })
            

這是頁腳