這樣寫(xiě)是可以加載的，下面的情況是不能加載的

window.onload=function(){
?? ?waterfall('main','box');
?? ?//后臺(tái)數(shù)據(jù)
?? ?//var dataInt={"data":[{"src":'1.jpg'},{"src":'1.jpg'},{"src":'1.jpg'}]};
?? ?window.onscroll=function(){
?? ??? ?//當(dāng)拖動(dòng)滾動(dòng)條時(shí)觸發(fā)事件
?? ??? ?if(checkScrollSlide()){
?? ??? ??? ?var oParent=document.getElementById('main');
?? ??? ??? ?//將數(shù)據(jù)塊渲染到頁(yè)面尾部
?? ??? ??? ?for(var i=0;i<10;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="file:///C:/Users/Administrator/YMH/1/1.jpg";
?? ??? ??? ??? ?oPic.appendChild(oImg);
?? ??? ??? ?}
?? ??? ??? ?waterfall('main','box');
?? ??? ?}
?? ??? ?//checkScrollSlide();
?? ?}
}

function waterfall(parent,box){
?? ?//取出main下所有class為box的元素
?? ?var oParent=document.getElementById(parent);
?? ?var oBoxs=getByClass(oParent,box);
?? ?//計(jì)算整個(gè)頁(yè)面顯示的列數(shù)（頁(yè)面寬/box的寬）
?? ?var oBoxw=oBoxs[0].offsetWidth;//offsetWidth獲取元素寬度,clientWidth頁(yè)面寬度
?? ?var cols=Math.floor((document.documentElement.clientWidth/oBoxw));
?? ?//設(shè)置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=oBoxw*index+'px';
?? ??? ??? ?hArr[index]+=oBoxs[i].offsetHeight;
?? ??? ?}
?? ?}
}

//根據(jù)class獲取元素
function getByClass(parent,clsName){
?? ?var boxArr=new Array(),//用來(lái)存儲(chǔ)獲取到的所有class為box的元素
?? ??? ?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 in arr){
?? ??? ?if(arr[i]==val){
?? ??? ??? ?return i;
?? ??? ?}
?? ?}
}

//檢測(cè)是否具備了加載數(shù)據(jù)塊的條件
function checkScrollSlide(){
?? ?var oParent=document.getElementById('main');
?? ?var oBoxs=getByClass(oParent,'box');
?? ?var lastBoxH=oBoxs[oBoxs.length-1].offsetTop+Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2);
?? ?//滾動(dòng)條滾動(dòng)距離,混雜模式||標(biāo)準(zhǔn)模式
?? ?var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
?? ?var height=document.body.clientHeight || document.documentElement.clientHeight;
?? ?console.log(scrollTop);
?? ?return (lastBoxH < scrollTop + height)?true:false;
?? ?
?? ?
?? ?
?? ?
?? ?
}

不能的情況：

window.onload=function(){
?? ?waterfall('main','box');
?? ?//后臺(tái)數(shù)據(jù)
??? var dataInt={"data":[{"src":'1.jpg'},{"src":'1.jpg'},{"src":'1.jpg'}]};
?? ?window.onscroll=function(){
?? ??? ?//當(dāng)拖動(dòng)滾動(dòng)條時(shí)觸發(fā)事件
?? ??? ?if(checkScrollSlide()){
?? ??? ??? ?var oParent=document.getElementById('main');
?? ??? ??? ?//將數(shù)據(jù)塊渲染到頁(yè)面尾部
?? ??? ??? ?for(var i=0;i<dataInt.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="file:///C:/Users/Administrator/YMH/1/"+dataInt.data[i].src;
?? ??? ??? ??? ?oPic.appendChild(oImg);
?? ??? ??? ?}
?? ??? ??? ?waterfall('main','box');
?? ??? ?}
?? ??? ?//checkScrollSlide();
?? ?}
}

function waterfall(parent,box){
?? ?//取出main下所有class為box的元素
?? ?var oParent=document.getElementById(parent);
?? ?var oBoxs=getByClass(oParent,box);
?? ?//計(jì)算整個(gè)頁(yè)面顯示的列數(shù)（頁(yè)面寬/box的寬）
?? ?var oBoxw=oBoxs[0].offsetWidth;//offsetWidth獲取元素寬度,clientWidth頁(yè)面寬度
?? ?var cols=Math.floor((document.documentElement.clientWidth/oBoxw));
?? ?//設(shè)置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=oBoxw*index+'px';
?? ??? ??? ?hArr[index]+=oBoxs[i].offsetHeight;
?? ??? ?}
?? ?}
}

//根據(jù)class獲取元素
function getByClass(parent,clsName){
?? ?var boxArr=new Array(),//用來(lái)存儲(chǔ)獲取到的所有class為box的元素
?? ??? ?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 in arr){
?? ??? ?if(arr[i]==val){
?? ??? ??? ?return i;
?? ??? ?}
?? ?}
}

//檢測(cè)是否具備了加載數(shù)據(jù)塊的條件
function checkScrollSlide(){
?? ?var oParent=document.getElementById('main');
?? ?var oBoxs=getByClass(oParent,'box');
?? ?var lastBoxH=oBoxs[oBoxs.length-1].offsetTop+Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2);
?? ?//滾動(dòng)條滾動(dòng)距離,混雜模式||標(biāo)準(zhǔn)模式
?? ?var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
?? ?var height=document.body.clientHeight || document.documentElement.clientHeight;
?? ?console.log(scrollTop);
?? ?return (lastBoxH < scrollTop + height)?true:false;
?? ?
?? ?
?? ?
?? ?
?? ?
}