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>
