懒加载与瀑布流布局

懒加载

---

一、懒加载的实现原理

由于过多的图片会严重影响网页的加载速度，并且移动网络下的流量消耗巨大，所以说延迟加载几乎是标配了。
图片懒加载的原理很简单：

1. 先设置图片的data-set属性（当然也可以是其他任意的，只要不会发送http请求就行了，作用就是为了存取值）值为其图片路径，由于不是src，所以不会发送http请求。
2. 计算出页面scrollTop的高度和浏览器的高度之和， 如果图片举例页面顶端的坐标Y（相对于整个页面，而不是浏览器窗口）小于前两者之和，就说明图片就要显示出来了（合适的时机，当然也可以是其他情况）。
3. 最后将 data-set 属性替换为 src 属性即可。

二、如何判断元素出现在用户视野

判断元素出现在用户视野，主要看以下三个属性值：

1. $(window).scrollTop()：窗口顶端到整个页面顶端的滚动距离
2. $(node).offset().top：元素距离页面内容的高度
3. $(window).height()：窗口的高度

如果元素距离页面内容的高度小于窗口滚动距离与窗口高度之和，即$(node).offset().top<=$(window).height() + $(window).scrollTop()，元素就会出现在我们视野中

原理图

三、如何判断浏览器滚动到最底部

判断浏览器滚动到最底部的原理与判断元素出现在用户视野类似，主要看以下三个属性值：

1. $(window).scrollTop()：窗口顶端到整个页面顶端的滚动距离
2. $(document).height()：整个文档（页面）的高度
3. $(window).height()：窗口的高度
   如果整个文档（页面）的高度等于窗口滚动距离与窗口高度之和，即$(document).height() == $(window).height() + $(window).scrollTop()，浏览器就滚动到最底部

瀑布流布局

---

瀑布流布局由pinterest.com网站首创，它的原理是：

1. 先通过计算出一排能够容纳几列元素，然后寻找各列之中所有元素高度之和的最小者，并将新的元素添加到该列上，
2. 继续寻找所有列的各元素之和的最小者，继续添加至该列上，如此循环下去，直至所有元素均能够按要求排列为止；

木桶布局

---

高度一样，而宽度不同的布局方式称之为木桶布局。它有几个鲜明的特点： 每行的图片高度一致；每行的图片都是占满的。
采用构造函数创建对象的方式来写这段代码，注意按照约定构造函数的首字母要大写。创建一个新对象，然后将构造函数的作用域赋给新对象，调用构造函数中的方法。
参考：木桶布局的原理与实现

实例代码

---

1. 实现图片懒加载效果：效果链接
2. 实现瀑布流布局效果：效果链接
3. 实现瀑布流新闻站：效果链接