懒加载
一、懒加载的实现原理
由于过多的图片会严重影响网页的加载速度，并且移动网络下的流量消耗巨大，所以说延迟加载几乎是标配了。
图片懒加载的原理很简单：
- 先设置图片的data-set属性（当然也可以是其他任意的，只要不会发送http请求就行了，作用就是为了存取值）值为其图片路径，由于不是src，所以不会发送http请求。
- 计算出页面scrollTop的高度和浏览器的高度之和， 如果图片举例页面顶端的坐标Y（相对于整个页面，而不是浏览器窗口）小于前两者之和，就说明图片就要显示出来了（合适的时机，当然也可以是其他情况）。
- 最后将 data-set 属性替换为 src 属性即可。
二、如何判断元素出现在用户视野
判断元素出现在用户视野，主要看以下三个属性值：
-
$(window).scrollTop()：窗口顶端到整个页面顶端的滚动距离 -
$(node).offset().top：元素距离页面内容的高度 -
$(window).height()：窗口的高度
如果元素距离页面内容的高度小于窗口滚动距离与窗口高度之和，即$(node).offset().top<=$(window).height() + $(window).scrollTop()，元素就会出现在我们视野中
原理图
三、如何判断浏览器滚动到最底部
判断浏览器滚动到最底部的原理与判断元素出现在用户视野类似，主要看以下三个属性值：
-
$(window).scrollTop()：窗口顶端到整个页面顶端的滚动距离 -
$(document).height()：整个文档（页面）的高度 -
$(window).height()：窗口的高度
如果整个文档（页面）的高度等于窗口滚动距离与窗口高度之和，即$(document).height() == $(window).height() + $(window).scrollTop()，浏览器就滚动到最底部
瀑布流布局
瀑布流布局由pinterest.com网站首创，它的原理是：
- 先通过计算出一排能够容纳几列元素，然后寻找各列之中所有元素高度之和的最小者，并将新的元素添加到该列上，
- 继续寻找所有列的各元素之和的最小者，继续添加至该列上，如此循环下去，直至所有元素均能够按要求排列为止；
木桶布局
高度一样，而宽度不同的布局方式称之为木桶布局。它有几个鲜明的特点： 每行的图片高度一致；每行的图片都是占满的。
采用构造函数创建对象的方式来写这段代码，注意按照约定构造函数的首字母要大写。创建一个新对象，然后将构造函数的作用域赋给新对象，调用构造函数中的方法。
参考：木桶布局的原理与实现
