js——瀑布流、判断自动加载

/**
     * 实现瀑布流布局
     */
    function waterFull(parent, child) {
        //father auto
        //get allBox and boxWidth
        var father = document.getElementById('box');
        var allBox = father.children;
        var boxWidth = allBox[0].offsetWidth;
        //get screenWidth
        var screenWidth = document.documentElement.offsetWidth;
        //get cols
        var cols = parseInt(screenWidth / boxWidth);
        //aim
        father.style.width = cols * boxWidth + 'px';
        father.style.margin = '0  auto';

        //sonBox position
        //define var
        var heightArr = [], boxHeight = 0, minBoxHeight = 0, minBoxIndex = 0;
        for (var i = 0; i < allBox.length; i++) {
            //get every box height
            boxHeight = allBox[i].offsetHeight;
            //get heightArr
            if (i < cols) {
                heightArr.push(boxHeight);
                allBox[i].style='';
            } else {
                //get minBoxHeight
                minBoxHeight = Math.min.apply(this, heightArr);
                //get minIndex
                minBoxIndex = getMinBoxIndex(heightArr, minBoxHeight);
                //sonBox position
                allBox[i].style.position = 'absolute';
                allBox[i].style.left = minBoxIndex * boxWidth + 'px';
                allBox[i].style.top = minBoxHeight + 'px';
                //refresh height
                heightArr[minBoxIndex] += boxHeight;
            }
        }
}

/**
     * 获取最小盒子
     */
    function getMinBoxIndex(arr, value) {
        for (var i = 0; i < arr.length; i++) {
            if (arr[i] === value) {
                return i;
            }
        }
    }

/**
     * 检查加载图片
     */
    function checkWillLoadImage() {
        //get last box
        var allBox = document.getElementsByClassName('mg');
        var lastBox = allBox[allBox.length - 1];
        //求出最后一个盒子自身高度的一半+offsetTop
        var lastBoxDis = lastBox.offsetHeight * 0.5 + lastBox.offsetTop;
        //get screenH
        var screenH = document.documentElement.clientHeight;
        //求出页面偏离浏览器的高度
        var scrollTop = scroll().top;

        return lastBoxDis <= screenH + scrollTop;
    }

/**
     * 获取滚动的头部距离和左边距离
     * 用法scroll().top/scroll().left
     * @returns {{top: number, left: number}}
     */
    function scroll() {
        if (window.pageXOffset !== null) {
            return {
                top: window.pageYOffset,
                left: window.pageXOffset
            }
        } else if (document.compatMode === 'CSS1Compat') {//遵循w3c
            return {
                top: document.documentElement.scrollTop,
                left: document.documentElement.scrollLeft
            }
        }

        return {
            top: document.body.scrollTop,
            left: document.body.scrollLeft
        }
    }