没有提醒错误，但是效果没有实现欸

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>瀑布流</title>
        <link rel="stylesheet" href="css/style.css">
        <!-- <script type="text/javascript" src="js/script.js"></script> -->
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script type="text/javascript" src="js/jss.js"></script>
    </head>
    <body>
        <div id="wrap">
            <div class="boxes"><img src="img/1.png"><a href="http://www.imooc.com">第一怪 竹筒当烟袋</a></div>
            <div class="boxes"><img src="img/2.png"><a href="http://www.imooc.com">第二怪 草帽当锅盖</a></div>
            <div class="boxes"><img src="img/3.png"><a href="http://www.imooc.com">第三怪 这边下雨那边晒</a></div>
            <div class="boxes"><img src="img/4.png"><a href="http://www.imooc.com">第四怪 四季衣服同穿戴</a></div>
            <div class="boxes"><img src="img/5.png"><a href="http://www.imooc.com">第五怪 火车没有汽车快</a></div>
            <div class="boxes"><img src="img/6.png"><a href="http://www.imooc.com">第六怪 火车不通国内通国外</a></div>
            <div class="boxes"><img src="img/7.png"><a href="http://www.imooc.com">第七怪 老奶爬山比猴快</a></div>
            <div class="boxes"><img src="img/8.png"><a href="http://www.imooc.com">第八怪 鞋子后边多一块</a></div>
            <div class="boxes"><img src="img/9.png"><a href="http://www.imooc.com">第九怪 脚趾四季露在外</a></div>
            <div class="boxes"><img src="img/10.png"><a href="http://www.imooc.com">第十怪 鸡蛋拴着卖</a></div>
            <div class="boxes"><img src="img/11.png"><a href="http://www.imooc.com">第十一怪 粑粑叫饵块</a></div>
            <div class="boxes"><img src="img/12.png"><a href="http://www.imooc.com">第十二怪 花生蚕豆数着卖</a></div>
            <div class="boxes"><img src="img/13.png"><a href="http://www.imooc.com">第十三怪 三个蚊子一盘菜</a></div>
            <div class="boxes"><img src="img/14.png"><a href="http://www.imooc.com">第十四怪 四个老鼠一麻袋</a></div>
            <div class="boxes"><img src="img/15.png"><a href="http://www.imooc.com">第十五怪 树上松毛扭着卖</a></div>
            <div class="boxes"><img src="img/16.png"><a href="http://www.imooc.com">第十六怪 姑娘叫老太</a></div>
            <div class="boxes"><img src="img/17.png"><a href="http://www.imooc.com">第十七怪 小和尚可以谈恋爱</a></div>
            <div class="boxes"><img src="img/18.png"><a href="http://www.imooc.com">第十八怪 背着娃娃谈恋爱</a></div>
        </div>
    </body>
</html>

/* All Tag */
*{
    margin:0;
    paddind:0;
    border:none;
}
body{
    background:#ddd;
}
a{
    text-decoration: none;
    color:#444;
}
a:hover{
    color:#999;
}
/* wrap */
#wrap{
    width:auto;
    height:auto;
    margin:0 auto;
    position:relative;
}
#wrap>div{
    width:280px;
    height:auto;
    float:left;
    margin:10px;
    padding:10px;
    border-radius:5px;
    background:#fff;
    box-sizing: border-box;
}
#wrap>div>img{
    width:100%;
    height:auto;
}
#wrap>div>a{
    display:block;
    font-size:18px;
    font-weight:bold;
    text-align:center;
    line-height:40px;
}

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

// 模拟数据
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){
    // 获取屏幕可以显示的列数
    var boxWidth=boxes.eq(0).width()+40;        //内容宽度加内外边距
    var windowWidth=$(window).width();
    var colsNumber=Math.floor(windowWidth/boxWidth);
     
    // 设置容器的宽度
    wrap.width(boxWidth*colsNumber);           //width()可以获取或者设置宽度
     
    // 定义一个数组存储每一列的高度
    var everyHeight=new Array();
    for(var i=0;i<boxes.length;i++){
        if(i<colsNumber){
            everyHeight[i]=boxes.eq(i).height()+40;
        } 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);
//             boxes.eq(i).css({
//                 'position':'absolute',
//                 'top':minHeight,
//                 'left':leftValue,
//                 'opacity':'0'
//             }).stop().animate({
//                 'opacity':'1'
//             },1000);
            //更新最小列的高度
            everyHeight[minIndex]+=boxes.eq(i).height()+40;
        }
    }
}
 
// 获取最小列的索引
function getIndex(minHeight,everyHeight){
    for(index in everyHeight){
        if(everyHeight[index]==minHeight){
            return index;
        }
    }
}
 
// 设置追加盒子的样式
var getStartNumber=0;
var setStyle=function(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;
}
 
// 数据请求检验（即什么时候追加盒子）
var getCheck=function(wrap){
    // 获取文档高度
    var documentHeight=$(window).height;
    // 获取文档滚动的高度
    var scrollHeight=$(window).scrollTop;
    // 获取最后一个盒子所在列的总高度
    var boxes=$('.boxes');
    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 class="boxes"><img src="img/'+data[i].src+'"><a href="http://www.imooc.com">'+data[i].title+'</a></div>';
            wrap.append(innerString);
        }
    }else{
        return false;
    }
        waterfall(wrap,$('.boxes'));
        // wrap.append('<div class="boxes"><img src="img/1.png"><a href="http://www.imooc.com">第一怪 竹筒当烟袋</a></div>');
}
$(document).ready(function() {
    var wrap=$('#wrap');
    var boxes=$('.boxes');
    waterfall(wrap,boxes);
     
    // 追加滚动效果
    $(this).scroll(function(event){
        appendBox(wrap);
    })
})