若一开始，页面上有许多的图片要加载，而如果同时加载这么多图片，会消耗性能。可以通过懒加载的方式，先只加载页面上所看到的图片，等滚动到页面下面时，再加载所需的图片。
作用： 可以缓解浏览器的压力，增强用户体验，让用户感觉到你的网站更快一些。将一次的压力，分解成好几段。
可以将img标签中的src属性链接成一个“加载”的图片或者不设置src，然后在img内自定义一个属性（如data-src）里面存放所要用到的图片地址。
判断图片是否在视野中，可以通过判断”元素到内容顶部的距离 <= 滚动距离 + 窗口距离 “即如下图：
image
来判断是否要显示图片，如果需要就将data-src的值给src。
demo
宽度一致，而高度不一样的布局就是瀑布流布局
先通过计算一排里面可以容纳多少列元素。
然后再判断哪一列元素的高度最短，就将下一个元素放到该列。
之后再判断放入该元素之后所形成的新的整排元素内，哪一列元素最短，再把下一个元素放置该列，以此类推。
关键变量是一个数组，存储的是当前每一列的高度之和。
demo
木桶布局
高度一致，而宽度不一样的布局就是木桶布局
首先设置一个基准的高度，将图片以一定的宽高比压缩至该高度内的第一行。
将图片放满第一行，当空间不够时，将前面的图片作为一个整体，拉伸至其宽度刚好可以充满容器。
之后多余的图片，就放置第二行，重复上述步奏，以此类推。
判断该元素是否在视野中，可以通过判断”元素到窗口顶部的距离 <= 滚动距离 + 窗口距离 “即如下图：
image
作者：徐金俊
链接：https://www.jianshu.com/p/260b28eda780
