waterfall_sinanews

https://luoshaoxiong.github.io/waterfall_sinanews/

懒加载原理

默认设置动画图片，如果该图片滚动到可视区则将src改为data-src。

瀑布流原理

1. 固定图片的宽度，计算出列数。
2. 创建一个数组记录每列高度。
3. 每次选择其中最小高度的列数将图片插入该列，并更改此列高度值。
4. 重复步骤3。

新闻页实现原理

1. 给图片容器的底部设置一个loading，判断是否在可视区，如果是则加载数据。
2. 固定图片的宽度，计算出列数。
3. 创建一个数组记录每列高度。
4. 每次选择其中最小高度的列数将图片插入该列，并更改此列高度值和当前图片容器的高度。
5. 若滚动到loading，则加载数据重复上述步骤4。

注意：

1. 插入的图片没有高度，无法撑开父容器，需要手动设置
2. 记得先插入之后才能获取子元素的高度
3. 图片顺序问题。若一次性给所有图片绑定load事件，由于图片加载顺序快慢不同，可能导致本该在后面的图片但由于加载快先插入。此时可以改为加载完再顺序判断下一张。