瀑布流這個東西，學過很久了，現在把它記錄一下。

簡單說一下原理：定義一個數組儲存第一行中的所有div的高度（如果有間隙，加上間隙），找出第一行中的最小高度，然後下一行第一個div的top值就等於這個最小高度，然後更新儲存的最小高度，繼續重複執行。

如果我們要將它做成小外掛的話，需要考慮：
1. 我們要將它放到什麼地方去？
2. 當前顯示的是第幾頁
3. 每頁顯示多少數量
4. jsonp返回的資料
5. 每個div的寬度
6. div與div之間的間隙
7. 傳入進來的圖片的key值
8. 如果有文字說明，傳入進來的文字的key值

以上幾點都是我們要考慮的，因為這些可能是會變化的，所以這些都要做成變數，讓使用者傳入。

好了，以下附上原始碼（還有點小問題，但我還不知哪裡出問題了）。

/**
 * 瀑布流
 * @param {Object} json：資料
 */
function WaterFall(json){
    this.obj = json.obj;                // 瀑布流要在哪個物件中顯示
    this.page = json.page || 1;         // 當前的頁數，預設為1
    this.count = json.count || 10;      // 每頁顯示的資料量，預設為10
    this.data = json.data;              // 利用jsonp獲取的資料
 

    this.width = json.width;            // 每張圖片的寬度
    this.gap = json.gap;                // 圖片與圖片之間的間隙
    this.path = json.path;              // 利用jsonp返回的資料中的圖片路徑的key值，不是value值
    this.textName = json.textName;      // 文字描述，如果沒有文字，可以不寫或者傳入可以轉換為false的值

    this.arrHeight = [];                // 記錄一行中每個div高度的陣列
 

    this.divs = [];                     // 裝著產生的div
    this.num = this.page * this.count;  // 當前顯示的圖片的總數
    this.isEnd = false;                 // 是否到了利用jsonp獲取的最後一個數據，如果到了，就算繼續滾動滑鼠滾輪，也不會再載入任何資料
}
// 初始化方法
WaterFall.prototype.init = function(){
    this.setObj();
    this.createElements();
    this.updatePosition();
    this.mouseEnd();
};
// 主要用於設定傳入進來的物件的position屬性
WaterFall.prototype.setObj = function(){
    this.obj.style.position = 'relative';
};
// 獲取最小高度
WaterFall.prototype.getMinHeight = function(){
    var min = 0;
    for(var i = 0, len = this.arrHeight.length; i < len; i ++){
        if(this.arrHeight[i] < this.arrHeight[min]){
            min = i;
        }
    }
    return min;
};
// 獲取最大高度
WaterFall.prototype.getMaxHeight = function(){
    var max = 0;
    for(var i = 0, len = this.arrHeight.length; i < len; i ++){
        if(this.arrHeight[i] > this.arrHeight[max]){
            max = i;
        }
    }
    return max;
};
// 建立div、建立img
WaterFall.prototype.createElements = function(){
    var start = this.count * (this.page - 1); // 當前已經顯示了多少資料
    for(var i = start; i < this.num; i ++){
        var div = document.createElement('div');
        div.style.width = this.width + 'px';
        div.style.margin = this.gap/2 + 'px';
        div.style.position = 'absolute';

        var img = document.createElement('img');
        img.src = this.data[i][this.path];
        img.style.width = this.width + 'px';

        div.appendChild(img);

        // 如果有傳入文字，則建立p標籤
        if(this.textName){
            var p = document.createElement('p');
            p.innerHTML = this.data[i][this.textName];

            div.appendChild(p);
        }

        this.divs.push(div);
    }
};
// 更新div的位置
WaterFall.prototype.updatePosition = function(){
    // 計算一行能放多少個div
    var cols = parseInt(this.obj.offsetWidth / (this.width + this.gap));
    // 計算更新位置的起始值（上一次的結束位置）
    var start = this.count * (this.page - 1); // 當前已經顯示了多少資料

    for(var i = start; i < this.num; i ++){
        var d = this.divs[i];
        this.obj.appendChild(d); // 將建立的div新增到物件中
        if(i < cols){ // 計算並設定第一行的div的left
            d.style.top = 0;
            d.style.left = i * (this.width + this.gap) + 'px';
            // 將第一行中每個div的（高度+間隙）新增到陣列中
            this.arrHeight.push(d.offsetHeight + this.gap);
        }else{
            var min = this.getMinHeight(); // 獲得每一行中的最小高度的div的下標
            d.style.top = this.arrHeight[min] + 'px';
            d.style.left = min * (this.width + this.gap) + 'px';

            // 更新陣列中儲存的最小高度，上一行的最小高度加上目前div的高度及間隙
            this.arrHeight[min] += (d.offsetHeight + this.gap);
        }
    }
    // 設定最外層obj的高度值
    var max = this.getMaxHeight();
    this.obj.style.height = this.arrHeight[max] + 'px';

};
// 滑鼠滾動到底部時，頁數加1，繼續載入剩餘的資料，當資料載入完成，不再繼續載入
WaterFall.prototype.mouseEnd = function(){
    var t = this;
    window.onscroll = function(){
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
        if(scrollTop + clientHeight > t.obj.offsetHeight){
            if(t.isEnd){
                return;
            }
            // 噹噹前頁面的總資料量大於jsonp傳遞過來的資料量時，將isEnd設定為true
            // 並將頁面總資料量設定為jsonp傳遞過來的資料量
            // 當前頁數設定為jsonp傳遞過來的資料量除以每頁資料，並向上取整
            if(t.num >= t.data.length){
                t.isEnd = true;
                t.num = t.data.length;
                t.page = Math.ceil(t.data.length / t.count);
            }else{
                // 如果當前頁面的總資料量小於或等於jsonp傳遞過來的資料量時，
                // 當前頁數加1，更新當前頁面總資料量
                t.page++;
                t.num = t.count * t.page;
                // 如果當前頁面的總資料量剛好等於jsonp傳遞過來的資料量時，也將isEnd設定為true
                if(t.num == t.data.length){
                    t.isEnd = true;
                }
            }
            // 根據頁面總資料量建立節點及更新節點位置
            t.createElements();
            t.updatePosition();
        }
    };
};