瀑布流思路总结

瀑布流思路总结

前言：瀑布流的效果，页面都是由很多数据块(这里将数据块分成多列)组成，每个数据块的高度不等，

        浏览器下拉后数据都是从高度最小列最先展示在用户面前；

实例：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;            
}

 

 

分类: JavaScript