// JavaScript Document

$(function(){

waterFall();

var intData={"data":[{'src':'23.jpg'},{'src':'24.jpg'},{'src':'25.jpg'},{'src':'26.jpg'}]};

var num=0;

$(window).on('scroll', function(){

if(num>10){

return false}

num++;

if(checkScrollSlide){

$.each(intData.data,function(index,element){

var $box=$('<div>').addClass('box').appendTo($("#main"));

var $pic=$('<div>').addClass('pic').appendTo($box);

$('<img>').attr('src','images/'+$(element).attr('src')).appendTo($pic);

})

waterFall();

}

})

})

function waterFall()

{

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

var boxW=$boxs.eq(0).outerWidth();//outerWidth包含內邊距和邊框

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

$("#main").width(cols*boxW).css("margin","0 auto");

var arrH=new Array();

$boxs.each(function(index, element) {

var boxH=$boxs.eq(index).outerHeight();

? ? ? ? if(index<cols){

arrH[index]=boxH;

}

else{

var minH=Math.min.apply(null,arrH);//獲取數組中最小的元素

var minHIndex=$.inArray(minH,arrH);//獲取數組中元素的索引值

$(element).css({

"position":"absolute",

"top":minH+"px",

"left":minHIndex*boxW+"px"});

arrH[minHIndex]+=$(element).outerHeight();

}

})

}

function checkScrollSlide(){

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

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

var scrollH=$(window).scrollTop() +$(window).height();

return (lastH<scrollH)?true:false;

}