關於網頁瀑布流思路總結

前言：瀑布流的效果，頁面都是由很多數據塊(這裏將數據塊分爲多列)組成，每個數據塊的高度不一樣，

        瀏覽器下拉後數據都是從高度最小列最先展示在用戶面前；

實例：http://miiee.taobao.com/choice.htm?pcid=8106&cid=8106001

 

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

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 -1;
}
var columns_h = []; // 保存列高
var minIdx = minIndexOf(columns_h);
var min_h = columns_h[minIdx]; // 求數組中最小項的值

 

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-url中
    var $targetSingle; // 目標數據塊，即插入到高度最小列的元素
    
    // 圖片加載完畢後，將其地址設置爲對應容器的src中
    var imgURL = $targetSingle.find('img');
    var img = new Image();
    
    var dataImg = $(img).data('dataObj', $targetSingle);
    // 監聽load事件
    dataImg.bind('load', function(){
        var dataObj = $(this).data('dataObj');
        imgUrl = dataObj.find('img').attr('data-url');
        dataObj.find('img').attr('src', imgUrl);
    });
    img.src = imgUrl;            
}

 本文轉載於http://www.cnblogs.com，由看看電影提供。