瀑布流加懒加载

//懒加载
$(function() {
    // 一开始没有滚动的时候，出现在视窗中的图片也会加载
    start();
    // 当页面开始滚动的时候，遍历图片，如果图片出现在视窗中，就加载图片
    var clock; //函数节流
    $(window).on('scroll',function(){
        if(clock){
            clearTimeout(clock);
        }
        clock = setTimeout(function(){
            start()
        },200)
    })
    function start(){
         $('img').not('[data-isLoading]').each(function () {
            if (isShow($(this))) {
                loadImg($(this));
            }
        })
    }
    // 判断图片是否出现在视窗的函数
    function isShow($node){
        return $node.offset().top <= $(window).height()+$(window).scrollTop();
    }
    // 加载图片的函数，就是把自定义属性data-src 存储的真正的图片地址，赋值给src
    function loadImg($img){
            $img.attr('src', $img.attr('data-src'));

            // 已经加载的图片，我给它设置一个属性，值为1，作为标识
            // 弄这个的初衷是因为，每次滚动的时候，所有的图片都会遍历一遍，这样有点浪费，所以做个标识，滚动的时候只遍历哪些还没有加载的图片
            $img.attr('data-isLoading',1);
    }
})

dom结构:
<ul class="picture-list">
    <li><a href=""><img src="" data-src="//oss.vfinemusic.com/default/pexels-photo-214051.png" alt=""></a></li>
    <li><a href=""><img src="" data-src="//oss.vfinemusic.com/default/pexels-photo-214051.png" alt=""></a></li>
    <li><a href=""><img src="" data-src="//oss.vfinemusic.com/default/pexels-photo-214051.png" alt=""></a></li>
    <li><a href=""><img src="" data-src="" alt=""></a></li>
    <li><a href=""><img src="" data-src="" alt=""></a></li>
    <li><a href=""><img src="" data-src="//oss.vfinemusic.com/default/pexels-photo-214051.png" alt=""></a></li>
    <li><a href=""><img src="" data-src="" alt=""></a></li>
    <li><a href=""><img src="" data-src="//oss.vfinemusic.com/default/pexels-photo-214051.png" alt=""></a></li>
</ul>
如果需要图片直接有间隙固定li的宽度 img上添加margin值

//瀑布流效果------固定列数
//因为是动态加载远程图片，在未加载完全无法获取图片宽高
//未加载完全就无法设定每一个item(包裹图片)的top。
function waterFall() {
    // 1- 确定图片的宽度 - 滚动条宽度
    // var pageWidth = getClient().width-8;
    var columns = 2; //2列
    // var itemWidth = parseInt(pageWidth/columns); //得到item的宽度  （没有固定宽度的情况）
    var itemWidth = $(".recommended-list li").width(); //得到item的宽度
    // $(".recommended-list li").width(itemWidth); //设置到item的宽度
    var arr = [];
    $(".recommended-list li").each(function(i){
        // var height = $(this).find("img").height();
        // var width = $(this).find("img").width();
        // var bi = itemWidth/width; //获取缩小的比值
        var boxheight = $(this).height(); //图片的高度*比值 = item的高度
        if (i < columns) {
            // 2- 确定第一行
            $(this).css({
                top:0,
                left:(itemWidth) * i
            });
            arr.push(boxheight);
        } else {
            // 其他行
            // 3- 找到数组中最小高度  和 它的索引
            var minHeight = arr[0];
            var index = 0;
            for (var j = 0; j < arr.length; j++) {
                if (minHeight > arr[j]) {
                    minHeight = arr[j];
                    index = j;
                }
            }
            // 4- 设置下一行的第一个盒子位置
            // top值就是最小列的高度 
            $(this).css({
                top:arr[index],
                left:$(".recommended-list li").eq(index).css("left")
            });
            // 5- 修改最小列的高度 
            // 最小列的高度 = 当前自己的高度 + 拼接过来的高度
            arr[index] = arr[index] + boxheight;
            $('.picture-list').css('height',arr[index]+'px')
        }
    });

}
//clientWidth 处理兼容性
function getClient() {
    return {
        width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
        height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
    }
}
 // 页面尺寸改变时实时触发
window.onresize = function() {
    //重新定义瀑布流
    waterFall();
};
$('.recommended-list img').on('load',function(){
    waterFall();
})