js笔记 demo篇（一）之瀑布流布局，图片的懒加载预加载（下）

//获取滚动条距离
function getScrollOffset () {
        if (window.pageXOffset) {
            return {
                x: window.pageXOffset,
                y: window.pageYOffset
            }
        } else {
            return {
                x: document.documentElement.scrollLeft + document.body.scrollLeft,
                y: document.documentElement.scrollTop + document.body.scrollTop
            }
        }
    }
//获取窗口大小
    function getViewportOffset () {
        if (window.innerWidth) {
            return {
                width: window.innerWidth,
                height: window.innerHeight
            }
        }
        if (window.compatMode == 'CSS1Compat') {
            return {
                width: document.documentElement.clientWidth,
                height: document.documentElement.clientHight
            }
        } else if (window.compatMode == 'BackCompat') {
            return {
                width: document.body.clientWidth,
                height: document.body.clientHight
            }
        }
    }



    (function () {
        var oUl = document.getElementsByTagName('ul');
        var loading = document.getElementsByClassName('loading')[0];
        var lock = true;
        function creDom (arr) { //当滚动距离达到要求是，生成dom插入页面渲染
        arr.forEach(function (ele, i) {
            var oLi = document.createElement('li');
            var oImg = document.createElement('img');
            var title = document.createElement('p');
            var tempImg = document.createElement('img');
            title.innerText = ele.title;
            oImg.src = './timg.gif';
            tempImg.src = ele.src;
            oLi.appendChild(oImg);
            oLi.appendChild(title);
            var index = obtainMin('min');
            oUl[index].appendChild(oLi);
            tempImg.onload = function () {
                setTimeout(function () { // 这里模拟的请求效果嘻
                    oImg.src = tempImg.src;
                    obtainMin()
                }, Math.random()*2000);
            }
        });
    }
     function obtainMin (type) {
        var len = oUl.length;
        var hArr = [];
        for (var i = 0; i < len; i++) {
            hArr[i] = oUl[i].offsetHeight;
        }
        if (type === 'min') {
            var min = Math.min.apply(null, hArr);
            var index = hArr.indexOf(min);
            return index;
        }
        var max = Math.max.apply(null, hArr);
        window.onscroll = null;
        scorllEvent(max);
    }
    function init () {
        if (lock) {
            loading.style.display = 'block';
            lock = false;
            //如果在项目中使用这里应该是请求回来的数据
            creDom([{src: './0.png', title: '我是tlite'}, {src: './3.png', title: '我是tlite'}, {src: './2.png', title: '我是tlite'}, {src: './1.png', title: '我是tlite'}, {src: './0.png', title: '我是tlite'}, {src: './3.png', title: '我是tlite'}, {src: './2.png', title: '我是tlite'}, {src: './1.png', title: '我是tlite'}]);
        }
    }
   function scorllEvent (max) {
        window.onscroll = function () {
            var scrH = getScrollOffset().y + getViewportOffset().height;
            var maxH = max;
            if (maxH <= scrH) {
                init();
            }
        }
    }
    init();
    })();

嘻嘻，这个小demo有写的不好的地方来拍砖额。
gitHub地址，clone后直接本地方式打开即可
gitHub中有html和css的代码，效果还可以。