<script>

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

? ?// 調用waterfall函數(shù)

? ? 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(){

?// 計算及定位數(shù)據(jù)塊顯示分散效果

?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(){

// ? // 檢測是否具備了加載數(shù)據(jù)塊的條件

// ? 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>