追加盒子没有实现

同学，你好。这里追加盒子的效果没有实现是因为没有写盒子追加的条件。这里建议封装一个判断什么时候盒子加载的函数，建议将追加盒子的样式也封装成一个函数方便调用。修改如下：

  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;

        // boxes.eq(i).css({

        //   'position':'absolute',

        //   'top':minHeight,

        //   'left':leftValue,

        //   'opacity':'0'

        // }).stop().animate({

        //   'opacity':'1'

        // },1000);

        setStyle(boxes.eq(i), minHeight, boxes.eq(minIndex).position().left, i);

            //更新最小列的高度

            everyHeight[minIndex]+=boxes.eq(i).height()+40;

          }

        }

      }

// 获取最小列的索引

function getIndex(minHeight,everyHeight){

  for(index in everyHeight){

    if(everyHeight[index]==minHeight){

      return index;

    }

  }

}

// 加载盒子

// var appendBox=function(wrap,boxes) {

//   for(i in date){

//     var innerString='<div class="boxes"><img src="images/'+date[i].src+'"><a href="http://www.imooc.com">'+date[i].title+'</a></div>';

//     wrap.append(innerString);

//   }

//         wrap.append('<div class="boxes"><img src="images/1.png"><a href="http://www.imooc.com">第一怪 竹筒当烟袋</a></div>');

//       }

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 = 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;

    console.log(lastColHeight + 9)

    return documentHeight + scrollHeight >= lastColHeight ? true : false;

};

//追加盒子函数

var appendBox = function(wrap) {

    if (getCheck(wrap)) {

        for (var 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'));

}

      $(document).ready(function() {

        var wrap=$('#wrap');

        var boxes=$('.boxes');

        waterfall(wrap,boxes);

    // 追加滚动效果

    $(this).scroll(function(event){

      appendBox(wrap,boxes);

    })

  })

</script>

</html>

祝学习愉快！