$(window).on('load',?function()?{
	waterfall();
	var?dataInt?=?{
		'data':?[{
			'src':?'22.jpg'
		},?{
			'src':?'23.jpg'
		},?{
			'src':?'24.jpg'
		},?{
			'src':?'13.jpg'
		},?{
			'src':?'14.jpg'
		},?{
			'src':?'11.jpg'
		},?{
			'src':?'4.jpg'
		}]
	};
	
????var?flag=true;
	window.onscroll?=?function()?{		
		if?(have()&&flag)?{
			$.each(dataInt.data,?function(idx,?obj)?{
				var?h?=?$('<div></div>');
				h.attr('class',?'box');
				var?p?=?$('<div></div>');
				p.attr('class',?'pic');
				p.appendTo(h);
				$('<img>').attr('src',?'img/'?+?$(obj).attr('src')).appendTo(p);
				h.appendTo('#main');
			})
			waterfall();
		}
		flag=false;
	}
	
	
})

function?waterfall()?{
	var?box?=?$("#main>div");
	var?width?=?box.eq(0).outerWidth();
	var?cols?=?Math.floor($(window).width()?/?width);
	$("#main").width(width?*?cols).css('margin',?'0?auto');
	var?hay?=?[];
	$(".box").each(function(index,?element)?{
		var?height?=?box.eq(index).outerHeight();
		if?(index?<?cols)?{
			//hay[index]=height;
			hay.push(height);
		}?else?{
			var?minHeight?=?Math.min.apply(this,?hay);
			var?minHIndex?=?$.inArray(minHeight,?hay);
			//$.inArray()獲取需要那個數組中的哪個值
			$(element).css({
				'position':?'absolute',
				'top':?minHeight?+?'px',
				'left':?minHIndex?*?width?+?'px'
			})
			hay[minHIndex]?+=?box.eq(index).outerHeight();
		}
	})
}

function?have()?{
	var?last?=?$("#main>div").last();
	var?lasthalf?=?last.offset().top?+?Math.floor(last.outerHeight()?/?2);
	var?scrolltop?=?$(window).scrollTop();
	var?documentheight?=?$(window).height();
	return?(lasthalf?<?scrolltop?+?documentheight)???true?:?false;
}