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) );                        }                    }                })            })            

這是頁尾