瀑布流思路总结

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

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

实例：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，原文链接