后加载图片的第一列出现图片重叠了，是哪里出问题了呢？

代码和老师的差不多。

第一列的图片多加载了，重叠在一起了。其他列正常，大神帮忙看下哪里出问题了

$(window).on('load',function(){
	waterfall("main","pic");
	var dataInt={'data':[{'src':'tang-31.jpg'},{'src':'tang-32.jpg'},{'src':'tang-33.jpg'},{'src':'tang-34.jpg'},{'src':'tang-35.jpg'}]};
	window.onscroll=function(){
		if (checkscrollside()) {
			$.each(dataInt.data,function(index,value){
				var $oPic=$('<div>').addClass('pic').appendTo($("#main"));
				var $oBox=$('<div>').addClass('box').appendTo($oPic);
				$('<img>').attr('src','images/'+$(value).attr('src')).appendTo($oBox);
			});
			waterfall();
			};
		}
});

//实现瀑布排列
function waterfall(parent,pic){
	var $aPic=$("#main>div");
	var iPicW=$aPic.eq(0).width();//一个列pic的宽度
	var num=Math.floor($(window).width()/iPicW);//每行能容纳的块的个数
	$("#main").css({
		'width':iPicW*num,
		'margin':'0 auto'
	});
	

	var picHArr=[ ];//用于存储 每列中所有块框的高度。

	$aPic.each(function(index,value){
		var picH=$aPic.eq(index).height();
		if(index<num){
			picHArr[index]=picH;
		}else{
			var minH=Math.min.apply(null,picHArr);//数组中的最小值。
			var minHIndex=$.inArray(minH,picHArr);
			$(value).css({
				'position':'absolute',
				'top':minH+15,
				'left':$aPic.eq(minHIndex).position().left
			});
			picHArr[minHIndex]+=$aPic.eq(index).outerHeight()+15;//更新添加了块框后的列高。
		}

	});
}

function checkscrollside(){
	var $aPic=$("#main>div");
	var lastPicH=$aPic.last().get(0).offsetTop+Math.floor($aPic.last().height()/2);
	//创建触发添加块框函数waterfall()】的高度：最后一个块框的距离网页顶部+自身高的一半(实现未滚到底就开始加载)
	var scrollTop=$(window).scrollTop();

	var documentH=$(document).width();//页面高度
	return(lastPicH<scrollTop+documentH)?true:false;
}