懒加载思路

window.onload=function(){
    var oBox = document.getElementsByClassName("box");
    var oImg = document.getElementsByTagName("img");
    var oBoxw = oBox[0].offsetWidth;//图片宽度
    var col = 5; //每一行放几个图 图片的张数
    loadImg(oImg);
    window.onscroll=function(){ //屏幕滚动就执行
        loadImg(oImg);
    }

    /**
     * 瀑布流
     * @param ele  包在最外面的盒子
     * @param col 每行显示的个数
     * @param eleWidth //图片的宽度
     */
    function waterfall(ele,col,eleWidth){
        var h = [];
        for(var i=0;i<ele.length;i++){
            if(i < col){ //小于5个
                h.push(ele[i].offsetHeight); //第一排盒子也就是图片的高度 都给放在数组里面
            }else{ //如果不在第一排
                //i = 第6张图片
                var minH = Math.min.apply(null,h); //获取第一排图片里面的最小 的高度 apply 必须加
                ele[i].style.position = 'absolute';
                ele[i].style.top = minH+'px';
                // console.log(minH)
                var index = h.indexOf(minH); //  如果minH存在 ，返回下标
                ele[i].style.left = index * eleWidth + "px"; //图片的宽度 左边有几个图片
                h[index] += ele[i].offsetHeight; //最小高度加上  第6个图片的高度 赋值给 最小高度 高度更新
            }
        }
    }

    /**
     *
     * @param arr 所有的图片 懒加载
     */
    function loadImg(arr){
        for(var i=0;i<arr.length;i++){
            //当前这个图片 到你可视窗口的距离 arr[i].getBoundingClientRect().top
            // document.documentElement.clientHeight 可视窗口的高度
            //  当前图片 到可视窗口上面的距离 < 可视窗口的高度  表示在可视窗口内部  或者 > 大于就不加载
            //arr[i].isLoad 每个图片有的属性。当前图片是否加载
            // arr[i].isLoad 现在的情况是 ，加载等于 true 没加载等于 und
            console.log(arr[i].isLoad   );
            if(arr[i].getBoundingClientRect().top < document.documentElement.clientHeight && !arr[i].isLoad){
                arr[i].isLoad = true;
                if(arr[i].dataset){ //h5 dataset对象 判断浏览器是否识别
                    aftLoadImg(arr[i],arr[i].dataset.original);
                }else{ //如果没有
                    aftLoadImg(arr[i],arr[i].getAttribute("data-original")); //getAttribute是图片里面的
                }
                arr[i].style.cssText="transition:opacity 4s;opacity:1;";
            }
        }
    }

    /**
     * @param obj 每一张图片
     * @param url  每一张图片 dataset.original
     */
    function aftLoadImg(obj,url){
        obj.src = url; //把每张图片下的 dataset.original data-original="images/毛利小五郎.jpg" 给src
        waterfall(oBox,col,oBoxw);
    }
}