瀑布流的简单实现

基本流程

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

加载规则

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

一些补充

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

?

1 2 3 4 5 6 7 8 9 10 11 12

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

 

 https://files.cnblogs.com/snandy/fallswater.zip