我们在做需要展示大量图片的网站时，为了减少网络压力、提升用户体验，通常会对图片进行懒加载处理，所以归纳整理一下图片懒加载的原理及代码，瀑布流其实也是懒加载的一种特殊处理展示的方式，一并记录。
懒加载
图片懒加载的核心思路其实就是将图片的真实src放置在另一个属性中，使用js加以判断图片的是否出现在视窗内：
$node.offset().top <= $(window).height() + $(window).scrollTop()
预留一定的滚动距离，图片即将出现在视窗内时将真实的src属性替换进去进行加载。
为了避免已经进行替换过的图片重复进行操作，可以在属性中添加特征值，检测到特征值存在时不予操作：
<img src="" alt="" data-loaded="1" data-src="">
start()
$(window).on('scroll',function(){
start()
})
function start(){
$('container img').not([data-loaded]).each(function(){
var $node = $(this)
if (isShow($node)){
setTimeout(function(){
loadImg($node)
},500)
}
})
}
function isShow($ndoe){
return $node.offset().top <= $(window).top() + $(window).scrollTop()
}
function loadImg($img){
$img.attr('src',$img.attr('data-src'))
$img.attr('data-loaded','loaded')
}
瀑布流
使用瀑布流布局展示 要考虑窗口自适应问题 所以首要问题就是确定每行展示元素的数量
var colCount
var imgWidth = $('.waterfall img').outerWidth(true) //考虑元素的padding和margin
colCount = Math.floor($('.waterfall').width()/imgWidth)
使用数组存储每列高度，新元素设置position:absoulte，left值设置为数组中最小值。
