                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /瀑布流布局

onscroll一點時，為什么json中要加載的幾張圖片重疊在一起，繼續滾動又正常顯示了？

如題。還有我換了幾張圖片后又沒有這個問題了

<!DOCTYPE?html>
<html>
<head>
	<meta?charset="utf-8">
	<title>js_瀑布流</title>
	<style?type="text/css">
		*{
			margin:?0;
			padding:?0;
		}
		#main{
			position:?relative;
		}
		.box{
			padding-left:?15px;
			padding-bottom:?15px;
			float:?left;
		}
		.pic{
			padding:?10px;
			border:1px?solid?#ccc;
			border-radius:?5px;
			box-shadow:?0?0?5px?#ccc;
		}
		
		img{
			width:?200px;
		}
	</style>
	<script?type="text/javascript">
		var?stop=false;
		window.onload=function(){
			waterfall('main','box');
			window.onscroll=function(){
				if(checkScroll()){
					
						loadImg();
				
				}
			}
		}
		function?waterfall(parent,box){
			//將main下的所有class為box的元素取出來
			var?oParent=document.getElementById(parent);
			var?oBoxs=getByClass(oParent,box);

			//計算整個頁面的列數
			var?oBoxW=oBoxs[0].offsetWidth;
			var?cols=Math.floor(document.documentElement.clientWidth/oBoxW);

			//設置main的寬度
			oParent.style.cssText='width:'+oBoxW*cols+'px;margin:0?auto';

			//存放每一列高度的數組
			var?harr=[];
			for(var?i=0;i<oBoxs.length;i++){
				if(i<cols){
					harr.push(oBoxs[i].offsetHeight);
				}else{
					var?minH=Math.min.apply(null,harr);
					var?index=getMinhIndex(harr,minH);
					oBoxs[i].style.position='absolute';
					oBoxs[i].style.top=minH+'px';
					oBoxs[i].style.left=oBoxs[index].offsetWidth*index+'px';
					//改變數組
					harr[index]+=oBoxs[i].offsetHeight;
				}
				console.log(oBoxs.length)
			}

			console.log(harr);
			
		}

		//根據class獲取元素
		//獲取parent下的所有元素，比較其class是否是box
		function?getByClass(parent,clsname){
			var?boxArr=new?Array();
			var?oElements=parent.getElementsByTagName('*');
			for(var?i=0;i<oElements.length;i++){
				if(oElements[i].className===clsname){
					boxArr.push(oElements[i]);
				}
			}
			return?boxArr;
		}
		function?getMinhIndex(arr,val){
			for(var?i=0;i<arr.length;i++){
				if(arr[i]==val){
					return?i;
				}
			}
		}
		function?checkScroll(){
			var?oParent=document.getElementById('main');
			var?oBoxs=getByClass(oParent,'box');
			var?lastBox=oBoxs[oBoxs.length-1];
			//?console.log(oBoxs?instanceof?Array);
			var?lastScrollTop=lastBox.offsetTop+Math.floor(lastBox.offsetHeight/2);
			var?scrollTop=document.body.scrollTop||document.documentElement.scrollTop;
			var?height=document.body.clientHeight||document.documentElement.clientHeight;

			return?(lastScrollTop<height+scrollTop)?true:false;
		}
		function?loadImg(){
			var?dataObj={'data':[{'src':'../img/img8.jpeg'},{'src':'../img/img9.jpeg'},{'src':'../img/img10.jpeg'}]};
			var?oParent=document.getElementById('main');
			for(var?i=0;i<dataObj.data.length;i++){
				var?oBox=document.createElement('div');
				oBox.className='box';
				oParent.appendChild(oBox);
				var?oPic=document.createElement('div');
				oPic.className='pic';
				oBox.appendChild(oPic);
				var?oImg=document.createElement('img');
				oImg.src=dataObj.data[i].src;
				oPic.appendChild(oImg);
			}
			waterfall('main','box');
		}
	</script>
</head>
<body>
	<div?id="main">
		<div?class="box">
			<div?class="pic">
				<img?src="../img/img1.jpeg">
			</div>
		</div>
		<div?class="box">
			<div?class="pic">
				<img?src="../img/img2.png">
			</div>
		</div>
		<div?class="box">
			<div?class="pic">
				<img?src="../img/img3.jpeg">
			</div>
		</div>
		<div?class="box">
			<div?class="pic">
				<img?src="../img/img4.jpeg">
			</div>
		</div>
		<div?class="box">
			<div?class="pic">
				<img?src="../img/img5.jpeg">
			</div>
		</div>
		<div?class="box">
			<div?class="pic">
				<img?src="../img/img6.jpeg">
			</div>
		</div>
		<div?class="box">
			<div?class="pic">
				<img?src="../img/img7.jpeg">
			</div>
		</div>
		<div?class="box">
			<div?class="pic">
				<img?src="../img/img1.jpeg">
			</div>
		</div>
		<div?class="box">
			<div?class="pic">
				<img?src="../img/img2.png">
			</div>
		</div>
		<div?class="box">
			<div?class="pic">
				<img?src="../img/img3.jpeg">
			</div>
		</div>
		<div?class="box">
			<div?class="pic">
				<img?src="../img/img4.jpeg">
			</div>
		</div>
		<div?class="box">
			<div?class="pic">
				<img?src="../img/img5.jpeg">
			</div>
		</div>
		<div?class="box">
			<div?class="pic">
				<img?src="../img/img6.jpeg">
			</div>
		</div>
		<div?class="box">
			<div?class="pic">
				<img?src="../img/img7.jpeg">
			</div>
		</div>
	</div>
</body>
</html>