图片懒加载&瀑布流

我们在做需要展示大量图片的网站时，为了减少网络压力、提升用户体验，通常会对图片进行懒加载处理，所以归纳整理一下图片懒加载的原理及代码，瀑布流其实也是懒加载的一种特殊处理展示的方式，一并记录。

懒加载

图片懒加载的核心思路其实就是将图片的真实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值设置为数组中最小值。