onscroll一点时，为什么json中要加载的几张图片重叠在一起，继续滚动又正常显示了？

源自：2-5 onscroll事件实现瀑布流布局的图片加载功能

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>

提问者：八宝米粥 2016-12-23 15:34

onscroll一点时，为什么json中要加载的几张图片重叠在一起，继续滚动又正常显示了？

个回答