懒加载和瀑布流

1.懒加载

原理

先将页面中的img元素的路径（src）设置为同一张图片的路径，当访问这个页面时，一开始只需要加载一次图片（因为都是同一张图片），当页面中的img元素出现在可视区域时，通过js来修改图片的路径，来显示真正需要显示的图片。

作用

使用图片懒加载，可以防止一次性向服务器发送大量请求，减轻服务器的压力，提高用户的浏览体验；

例子

2.瀑布流

原理

先计算容器的一行能排多少列元素（容器的宽度除以一个元素的宽度），然后从所有列中，找到列的高度（添加了元素后高度要增加）最小的那一列，将一个元素添加到这一列中，然后不断重复这一操作，直到所有元素排列完成；

例子

3.判断元素出现在用户视野、判断浏览器滚动到最底部

例子