瀑布流布局与图片懒加载

瀑布流

视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。

图片懒加载

当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次），只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载。

实现步骤
1、页面中的img元素，如果没有src属性，浏览器就不会发出请求去下载图片（也就没有请求咯，也就提高性能咯），通过javascript设置了图片路径，浏览器才会送请求。

2、获取真正的路径，将真正的路径存在元素的“data-url”（这个名字起个自己认识好记的就行）属性里，要用的时候就取出来，再设置；

<img src="loading.gif" data-src="http://真正的图片地址/xxx.jpg">

相关参数
1.屏幕可视窗口大小$(window).height()
2.浏览器窗口顶部与文档顶部之间的距离，也就是滚动条滚动的距离$(document).scrollTop()
3.元素相对于文档document顶部的距离$("img").offset().top