瀑布流

这种布局适合于小数据块，每个数据块内容相近且没有侧重。视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。懒加载模式。

几种实现方式：
1）传统多列浮动 纵

• 各列固定宽度，并且左浮动；
• 一列中的数据块为一组，列中的每个数据块依次排列即可；
• 更多数据加载时，需要分别插入到不同的列上；

2）css3定义 多列布局 纵

• 可以指定容器的列个数，列间距，列中间边框，列宽度来实现；

3）绝对定位 最优 横

• 对现有数据块进行排列计算各自所在的位置，
• 下拉滚动时，出发加载数据操作，并把数据添加到目标容器
• 函数节流 resize 触发会很频繁，可以将回调函数缓存一段时候后执行，即当这段时间内多次触发了resize事件，但回调函数只会执行一次(见 S.buffer 函数)
• 确定预加载线高度值，表示何时触发加载数据。

js核心思路：

1. 编写方法：获取容器内所有外层元素，存入数组；
2. 编写方法：计算容器内一行可以承载多少个元素，方法：容器宽度/元素宽度，四舍五入向下取整；
3. 编写方法：把每一行中所有元素的高度值存入数组；
4. 编写方法：在高度值数组中找到最小高度值；
5. 编写方法：把第二行第一个元素定位到上一行所有元素中高度最低的元素下面，即设置该元素的top，left，position属性；
6. 编写方法：重置当前高度值数组中的最小值；
7. 编写方法：从第二行第一个元素开始，遍历每个元素，用上述方法重新定位每个元素的位置，把该事件绑定到页面；
8. 编写方法：监听鼠标事件，当前容器内最下面一个元素的offsetTop < 浏览器可视高度/已滚动高度时，h或者当滚动到最底部以上100像素时， 加载新内容 。加载下一页数据；
9. 加载完之后，用上述方法重新定位新加载元素的位置；

   雪碧图

参考：

• 《WEB设计》瀑布流布局浅析