数据变为只循环一次之后，最下方有两张图重叠了，这是什么原因？

$(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;
}