瀑布流追加效果

json是JavaScript对象表示法，是轻量级的文本数据交换格式；属性与属性之间用逗号分开；属性与属性值之间用冒号分开。

json只能用双引号。

data[0].src
data[2].title

追加条件：最后一个盒子的top值+其高度<document高度值+滚动条滚动的值

<script>
 //模拟数据
   var data=[{
       "src":"picOne.jpg",
       "title":"第一怪 竹筒当烟袋"
   },{
       "src":"picTwo.jpg",
       "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);
                 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'
                 },1000);
             });
         };

     };
   //获取最小列的索引
   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 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;
   };

   //追加盒子函数：
   /*function appendBox(){};*/
   //更偏向函数型的全局变量
   var appendBox=function(wrap,boxes){
       if(getCheck(wrap)){
           for(i in data){
               var innerString='<div><img src="images/'+data[i].src+'"/><a href="http://www.imooc.com">'+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');
         //加载盒子
         waterfall(wrap,boxes);

         $(this).scroll(function(event){
             appendBox(wrap,boxes);
         })
         /* $(document).scroll(function(event){
          alert(this);
          })*/
     });


</script>

//鼠标在图片上透明
             boxes.eq(i).hover(function(event){
                 $(this).stop().animate({
                     'opacity':'0.5'
                 },500);
             },function(event){
                 $(this).stop().animate({
                     'opacity':'1'
                 },1000);
             });
         };