瀑布流思路總結

前言：瀑布流的效果，頁面都是由很多資料塊(這裡将資料塊分成多列)組成，每個資料塊的高度不等，

浏覽器下拉後資料都是從高度最小列最先展示在使用者面前；

執行個體：http://miiee.taobao.com/choice.htm?pcid=8106&cid=8106001

1、首先擷取每列的高度,儲存在一個數組中，然後求數組中最小項的值

// 擷取數值數組中最小項的索引
// 數組隻有一個元素，直接傳回0
// 如果最小值有兩個或以上,則傳回第一個最小值的索引
function minIndexOf ( array ) {
    var arr = array || [], len = arr.length, index;
    if ( len > 0 ) {
        index = 0;
        if (len === 1) {
            return index;
        }
        for (var i = 1; i < len; i++) {
            if (arr[index] > arr[i]) {
               index = i;
            }
        }
        return index;
    }
}

2、(滾動條下拉)判斷什麼時候再次請求資料

// 當浏覽器 視口高度+scrollTop 大于等于 最小列的底部位置時，再次請求資料
function scrollEvent() {
    var scrollTop = $(window).scrollTop();
    var viewH = $(window).height(); // 在resize事件中更新
    var dynamicVal = scrollTop + viewH;

    var columns_postop = $(selector).offset().top;
    var referenceVal = columns_postop + min_h;

    if ( dynamicVal >= referenceVal ) {
        // 再次請求ajax
    }
}

3、循環處理資料,每插入一個資料塊，需要更新min_h,這樣每次插入都是最先插入到高度最小列中

function handleLoopData( start, end ) {
    // var itemList; 假設這是資料集合

    if ( var i = start; i < end; i++ ) {
        var itemObj = itemList[i];
        if ( itemObj !== undefined ) {
            // 結合HTML,将資料插入到高度最小列中,最小列根據min_h來判斷
            // do something
            // 再次更新min_h的值
        }
    }
}

優化：

1、ajax請求傳回的資料可以分批插入到頁面中，利用 handleLoopData函數的兩個參數;

2、在處理圖檔時，可以先将url位址設定在img标簽的一個屬性中，CSS可以将圖檔父容器背景設定為一個加載的gif，當圖檔加載完畢後，再将該位址填入到img标簽的src中。

// 修改一下handleLoopData函數中代碼
if ( itemObj !== undefined ) {
    // 結合HTML,将資料插入到高度最小列中,最小列根據min_h來判斷
    // do something
    // 再次更新min_h的值
    
    // 假如将url位址設定為img标簽的data-pic中
    var $targetPic; // 目标圖檔容器

    var imgUrl = $targetPic.attr('data-pic');
    (function($targetPic, imgUrl){
        var img = new Image();
        $(img).bind('load', function(){
            $targetPic.attr('src', imgUrl);
        });
        img.src = imgUrl;
    }($targetPic, imgUrl));
}

該博文最後更新于：2013/11/25

如需轉載請注明出處：部落格園華子yjh，原文連結