window.onload = function () {

            waterfall('main', 'box');

            var ImgJson = {
                'data': [
                    {'src': 'http://placehold.it/200x300'}

                ]
            };

            //监听scroll事件
            window.onscroll = function () {
                var isPosting = false;
                if (checkScrollSlide('main', 'box') && !isPosting) {
                    var oParent = document.getElementById('main');
                    for (var i in ImgJson.data) {
                        var oBox = document.createElement('div');
                        oBox.className = 'box';
                        oBox.innerHTML = '<div class="pic"><img src="' + ImgJson.data[i].src + '"></div>';
                        oParent.appendChild(oBox);
                    }
                    isPosting = false;
                    waterfall('main', 'box');
                }
            }
        };

        function waterfall(parent, clsName) {
            //获取元素
            var oParent = document.getElementById(parent);
            //获取所有box
            var aBoxArr = oParent.getElementsByClassName(clsName);
            //单个box的宽度
            var iBoxw = aBoxArr[0].offsetWidth;
            //列数
            var cols = Math.floor(document.documentElement.clientWidth / iBoxw);
            oParent.style.cssText = 'width:' + iBoxw * (cols + 1) + 'px;margin:0 auto;';

            //储存所有高度
            var hArr = [];
            for (var i = 0; i < aBoxArr.length; i++) {
                if (i < cols) {
                    hArr[i] = aBoxArr[i].offsetHeight;
                } else {
                    //获取hArr的最小值
                    var minH = Math.min.apply(null, hArr);
                    //hArr最小值索引index
                    var minHIndex = getMinHIndex(hArr, minH);
                    aBoxArr[i].style.cssText = 'position:absolute;top:' + minH + 'px;left:' + aBoxArr[minHIndex].offsetLeft + 'px';

                    //添加元素之后更新hArr
                    hArr[minHIndex] += aBoxArr[i].offsetHeight;
                }
            }
        }

        //获取最小索引值
        function getMinHIndex(arr, val) {
            for (var i in arr) {
                if (arr[i] == val) {
                    return i;
                }
            }
        }

        //检查是否满足加载数据的条件
        function checkScrollSlide(parent, clsName) {
            var oParent = document.getElementById(parent);
            var aBoxArr = oParent.getElementsByClassName(clsName);
            //最后一个box元素的offsetTop+高度的一半
            var lastBoxH = aBoxArr[aBoxArr.length - 1].offsetTop + aBoxArr[aBoxArr.length - 1].offsetHeight / 2;

            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            var height = document.documentElement.clientHeight || document.body.clientHeight;
            return lastBoxH < scrollTop + height;
        }