老师,瀑布流布局问题：1、在内容追加几次之后滑动滚轮就不能再追加内容了2、浏览器窗口变小后也无法追加

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

    <script type="text/javascript">
        var data=[{
            "src": "1.png",
            "title": "第一怪 竹筒当烟袋"
        }, {
            "src": "2.png",
            "title": "第二怪 草帽当锅盖"
        }, {
            "src": "3.png",
            "title": "第三怪 这边下雨那边晒"
        }, {
            "src": "4.png",
            "title": "第四怪 四季服装同穿戴"
        }, {
            "src": "5.png",
            "title": "第五怪 火车没有汽车快"
        }, {
            "src": "6.png",
            "title": "第六怪 火车不通国内通国外"
        }, {
            "src": "7.png",
            "title": "第七怪 老奶爬山比猴快"
        }, {
            "src": "8.png",
            "title": "第八怪 鞋子后面多一块"
        }, {
            "src": "9.png",
            "title": "第九怪 脚趾四季露在外"
        }, {
            "src": "10.png",
            "title": "第十怪 鸡蛋拴着卖"
        }, {
            "src": "11.png",
            "title": "第十一怪 粑粑叫饵块"
        }, {
            "src": "12.png",
            "title": "第十二怪 花生蚕豆数着卖"
        }, {
            "src": "13.png",
            "title": "第十三怪 三个蚊子一盘菜"
        }, {
            "src": "14.png",
            "title": "第十四怪 四个老鼠一麻袋"
        }, {
            "src": "15.png",
            "title": "第十五怪 树上松毛扭着卖"
        }, {
            "src": "16.png",
            "title": "第十六怪 姑娘叫老太"
        }, {
            "src": "17.png",
            "title": "第十七怪 小和尚可以谈恋爱"
        }, {
            "src": "18.png",
            "title": "第十八怪 背着娃娃谈恋爱"
        }];
 
 
        var waterfall=function(wrap,boxes){
            // 获取屏幕可以显示的列数,width得到的只有内容的宽度
            var boxWidth = boxes.eq(0).width()+40;
            var windowWidht = $(window).width();
            var colsNumber= Math.floor(windowWidht/boxWidth);
            // 设置容器的宽度
            wrap.width(boxWidth*colsNumber);
            // 定义一个数组并存储每一列的高度
            var everyHeight= new Array();
            for (var i = 0; i < boxes.length; i++) {
                if(i < colsNumber){
                    everyHeight[i] = boxes.eq(i).outerHeight(true);
                }else{
                    //获取最小列高度
                    var minHeight=Math.min.apply(null,everyHeight);
                    //获取最小列的索引
                    var minIndex = getIndex(minHeight,everyHeight);
                    var leftValue = boxes.eq(minIndex).position().left;
                    //设置盒子样式
                    setStyle(boxes.eq(i),minHeight,leftValue,i);
                    //更新最小列的高度
                    everyHeight[minIndex]+=boxes.eq(i).height()+40;
                }
                //鼠标经过呈现半透明效果
                boxes.eq(i).hover(function(event){
                    $(this).stop().animate({
                        opacity:'0.5'
                    },500);
                },function(event){
                    $(this).stop().animate({
                        opacity:'1'
                    },500);
                });
            }
        }
        //设置追加盒子的样式
        var getStartNumber=0;
        function setStyle(box,top,left,index){
            if(getStartNumber>=index){
                return false;
            }
            box.css({
                'position':'absolute',
                'top':top,
                'left':left,
                'opacity':'0'
            }).stop().animate({
                'opacity':'1'
            },1000);
            getStartNumber=index;
 
        }
        //获取最小列的索引
        function getIndex(minHeight,everyHeight){
            for(index in everyHeight){
                if(everyHeight[index]==minHeight){
                    return index;
                }
            }
        }
        //数据请求检验
        var getCheck=function(wrap){
            //获取文档高度
            var documentHeight=$(window).height();
            //获取文档向上滚动的高度
            var scrollHeight=$(window).scrollTop();
            //获取最后一个盒子所在列的高度
            var boxes=wrap.children('div');
            var lastBoxTop=boxes.eq(boxes.length-1).offset().top;
            var lastHeight=boxes.eq(boxes.length-1).height()+20;
            var lastColHeight=lastBoxTop+lastHeight;
            return documentHeight+scrollHeight >= lastColHeight?true:false;
        }
        //追加盒子函数
        var appendBox = function(wrap){
            if(getCheck(wrap)){
                for(i in data){
                    var innerString = '<div><img src="images/'+data[i].src+'"><a href="http://www.imooc.com" target="_blank">'+data[i].title+'</a></div>';
                    wrap.append(innerString);
                }
            }else{
                return false;
            }
            waterfall(wrap,wrap.children('div'));
 
        };
        //页面加载完之后再加载jquery
        $(document).ready(function(event){
            var wrap=$('#wrap');
            var boxes = $('#wrap').children('div');
            //children取到的是所有的子元素的集合
            waterfall(wrap,boxes);
            // 滚动事件
            $(this).scroll(function(event){
                appendBox(wrap,boxes);
            });
        });