请大神帮忙修复下瀑布流bug，滚动条拉了一点就开始加载图片了。居中不了。

Question

window.onload=function(){
 waterfall('main','box');
 
 var dataInt={"data":[{"src":'img_2.jpg'},{"src":'img_3.jpg'},{"src":'img_5.jpg'},{"src":'img_7.jpg'}]}
 window.onscroll=function(){
  if(checkScrollSlide){
  var allparent=document.getElementById('main');
   //将数据渲染到页面尾部；//获取一个对象的属性的是要写上对象及其属性名称(dataInt.data)
   for(var i=0;i<dataInt.data.length;i++){
    var allbox=document.createElement('div');
    allbox.className='box';
    allparent.appendChild(allbox);//把一个元素添加到父元素的最后面把allbox添加到allparent;
       var allpic=document.createElement('div');
    allpic.className='pic';
    allbox.appendChild(allpic);
    var allimg=document.createElement('img');
    allimg.src="img/"+dataInt.data[i].src;
    allpic.appendChild(allimg);
   }
   waterfall('main','box');
  }

 }
}
function waterfall(parent,box){
 var allparent=document.getElementById(parent);
 var allbox=getbyclass(allparent,box);
// console.log(allbox.length);
    var allboxw=allbox[0].offsetWidth;
    var cols=Math.round(document.documentElement.clientWidth/allboxw);
//  console.log(cols);
    allparent.style.cssText='width:'+allboxw*cols+'px;margin:0 auto;';
   
    var harr=[];//存储每列的高度;
    for(var i=0;i<allbox.length;i++){
     if(i<cols){
      harr.push(allbox[i].offsetHeight);
     }
     else{
      var minH=Math.min.apply(null,harr);
      var id=minH_id(harr,minH);
      //console.log(minH);
      //console.log(id);
      allbox[i].style.position='absolute';
      allbox[i].style.top=harr[id]+'px';
      //allbox[i].style.left=allboxw*id+'px';第一种获取左边距的方法；
      allbox[i].style.left=allbox[id].offsetLeft+'px';//第二种获取左边距的方法；
      harr[id]+=allbox[i].offsetHeight;//让高最小的图片加上图片后为两者的总高度。
      //目的为了刷新最小高度值，不让后面图片重叠
     }
    }
    //console.log(harr);
   
}
function getbyclass(parent,clsname){
 var boxarr=new Array(),
     allelements=parent.getElementsByTagName('*');
  for(var i=0;i<allelements.length;i++){
   if(allelements[i].className==clsname){
    boxarr.push(allelements[i]);
   }
  }
  return boxarr;
}

function minH_id(harr,minH){
 for(var i in harr){
  if(harr[i]==minH){
   return i;
  }
 }
}

//检测条件：滚走距离加上屏幕高度是否超过页面顶部到最后一张图片一半的距离;
function checkScrollSlide(){
 var allparent=document.getElementById('main');
 var allbox=getbyclass(allparent,'box');
 //页面顶部到最后一张图片一半的距离
 var lastBoxH=allbox[allbox.length-1].offsetTop+Math.floor(allbox[allbox.length-1].offsetHeight/2);
 //滚走距离屏幕高度
 var scrollH=document.body.scrollTop || document.documentElement.scrollTop;
 
 //屏幕高度
 var clientH=document.body.clientHeight || document.documentElement.clientHeight;
 
 return (lastBoxH<scrollH+clientH)?true:false;
 /*if(lastBoxH<scrollH+clientH){
  return true;
 }
 else{
  return false;
 }*/
}

Answer 1

作为一个资深程序猿，建议你一边做练习，一边扣脚，这样能促进脚底血液流通，使大脑转速更快！记忆力更强！