<script>

$( window ).on( "load", function(){

   // 调用waterfall函数

    waterfall();

    // var dataInt={'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'}]};

    // window.onscroll=function(){

    //    // 拖动滚动条时

    //    if(checkscrollside()){

    //     $.each(dataInt.data,function(index,value){

    //         var oPin=$("div").addClass('pin').appendTo($("#main"));

    //         var oBox=$("div").addClass('box').appendTo($(oPin));

    //         var oImg=$("img").attr('src','images/'+$(value).src).appendTo($(oBox)); 

    //     })

    //    }

    //    waterfall();

    //  }

});

var arr=[];

function waterfall(){

 // 计算及定位数据块显示分散效果

 var $Boxs=$("#main>div");

 var w=$Boxs.eq(0).outerWidth();

 var cols=Math.floor($(window).width()/w);

 $("#main").css({

    'width':w*cols+'px',

    'margin':'0 auto'

 });

 $Boxs.each(function(index,value){

    if(index<cols){

        arr.push($Boxs.eq(index).outerHeight());

    }else{

        var maxH=Math.max.apply(null,arr);

        $(value).css({

            'position':'absolute',

            'top':maxH+'px',

            'left':w*2+'px'

        });

    }

 });

 var minH=Math.min.apply(null,arr);

 var minHindex=$.inArray(minH,arr);

 animateWaterfall($Boxs,cols,w);

}

function animateWaterfall($Boxs,i,w){

                var minH=Math.min.apply(null,arr);

                var minHindex=$.inArray(minH,arr);

                $Boxs.eq(i).animate({

                    top:arr[minHindex],

                    left:w*minHindex

                },1000,function(){

                    arr[minHindex]+=$Boxs.eq(i).outerHeight();

                    i++;

                    animateWaterfall($Boxs,i,w);

                });

            }

// function checkscrollside(){

//   // 检测是否具备了加载数据块的条件

//   var $lastBox=$("#main>div").last();

//   var lastBoxH=$lastBox.offset().top+Math.floor($lastBox.outerHeight()/2);

//   var scrollTop=$(window).scrollTop();

//   var documentH=$(window).width();

//   return (lastBoxH<scrollTop+documentH)?true:false;

// }

</script>