$(window).on("load",function(){
	waterfall();
	var?dataInt?=?{"data":[{"src":"P_00.jpg"},{"src":"P_01.jpg"},{"src":"P_02.jpg"}]};
	$(window).on('scroll',function(){
		if(checkScrollSlide()){
			$each(dataInt.data,function(key,value){
				//console.log(value);
				var?oBox?=?$('<div>').addClass('box').appendTo($("#main"));
				var?oPic?=?$('<div>').addClass('pic').appendTo($(oBox));
				$('<img>').attr('src','images/'+$(value).attr('src')).appendTo(oPic);
				
				//console.log($(value).attr('src'));
			})
			waterfall();
		}
	})
})
function?waterfall(){
	var?$boxs?=?$('#main?>?div');
	var?w?=?$boxs.eq(0).outerWidth();//outerWidth?可以獲取加padding?margin的寬
	var?cols?=?Math.floor($(window).width()/w);
	$("#main").width(w*cols).css("margin","0?auto");//不需要設(shè)置單位
	var?hArr?=?[];
	$boxs.each(function(index,value){
		var?h?=?$boxs.eq(index).outerHeight();
		if(index<cols){
			hArr[index]?=?h;
		}else{
			var?minH?=?Math.min.apply(null,hArr);
			var?minHIndex?=?$.inArray(minH,hArr);
			$(value).css({
				'position'?:?'absolute',
				'top'?:?minH+'px',
				'left'?:?minHIndex*w?+?'px'
			})
			hArr[minHIndex]+=?$boxs.eq(index).outerHeight();
		}
	})
	//console.log(index);
}

function?checkScrollSlide(){
	var?$lastBox?=?$('#min>div').last();
	console.log($lastBox);
	var?lastBoxDis?=?$lastBox.offset().top?+?Math.floor($lastBox.outerHeight()/2);
	var?scrollTop?=?$(window).scrollTop();
	var?documentH?=?$(window).height();
	return?(lastBoxDis?<?scrollTop?+?documentH)?true?:?false;
}