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);
 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);
   boxes.eq(i).css({
    'position':'absolute',
    'top':minHeight,
    'left':boxes.eq(minIndex).position().left,
    '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;
  }
 }
}

//

//检测结果出现所有盒子(len>18)opacity为0的闪现
//追加数据检测
var getCheck=function(wrap){
 var documentHeight=$(window).height();
 var scrollHeight=$(window).scrollTop();
 var boxes=$('#wrap').children('div');//这里为什么不能直接调用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><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(event){
 var wrap=$('#wrap');
 var boxes=$('#wrap').children('div');//这里为什么不直接用wrap，为了快捷吗？
 waterfall(wrap,boxes);
 $(this).scroll(function(event){
 appendBox(wrap,boxes);
 });
});