瀑布流的简单实现

基本流程

• 第一屏图片不用Ajax加载，默认写在页面上。第一屏要以最快效率打开，待JS文件下载后再Ajax请求明显要慢。
• 滚动到最后一行图片时开始加载图片，每次加载两行，每行4张图片（4列布局）。位置计算是关键的，可以以页面中翻页容器或页面footer为参考点，如果scrollTop大概等于翻页容器或footer的top则开始加载。这里的大概根据需求适当缩减100-300px。

加载规则

• 各列容器按高度从低到高排序
• Ajax请求的图片数据按高度从高到低排序
• 拼凑HTML片段后把最高的item添加到最低的列容器中，以尽量保证拖动多次后各列高度相当，不至于某列空白太多

一些补充

• 加载的元素item一般采用动画淡出（fadeIn）
• 滚动事件scroll的hander被调用太频繁，可采用“防弹跳”技术，即设定一个时间值，比如300ms，300ms内的调用被clearTimeout掉。可避免拖动滚动条时卡。

// 防止弹跳，避免scroll时频繁调用
function debounce(fn, wait) {
    var timer
    return function() {
        var later = function() {
            timer = null
            fn(arguments)
        }
        clearTimeout(timer)
        timer = setTimeout(later, wait)
    }
}

 

 

评论

1 楼 zhangguowei 2014-05-14  

:    :twisted