为什么我使用dataInt拉滚动条不会加载图片呢
这样写是可以加载的，下面的情况是不能加载的
window.onload=function(){
waterfall('main','box');
//后台数据
//var dataInt={"data":[{"src":'1.jpg'},{"src":'1.jpg'},{"src":'1.jpg'}]};
window.onscroll=function(){
//当拖动滚动条时触发事件
if(checkScrollSlide()){
var oParent=document.getElementById('main');
//将数据块渲染到页面尾部
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);
//计算整个页面显示的列数（页面宽/box的宽）
var oBoxw=oBoxs[0].offsetWidth;//offsetWidth获取元素宽度,clientWidth页面宽度
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=oBoxw*index+'px';
hArr[index]+=oBoxs[i].offsetHeight;
}
}
}
//根据class获取元素
function getByClass(parent,clsName){
var boxArr=new Array(),//用来存储获取到的所有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;
}
}
}
//检测是否具备了加载数据块的条件
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);
//滚动条滚动距离,混杂模式||标准模式
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');
//后台数据
var dataInt={"data":[{"src":'1.jpg'},{"src":'1.jpg'},{"src":'1.jpg'}]};
window.onscroll=function(){
//当拖动滚动条时触发事件
if(checkScrollSlide()){
var oParent=document.getElementById('main');
//将数据块渲染到页面尾部
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);
//计算整个页面显示的列数（页面宽/box的宽）
var oBoxw=oBoxs[0].offsetWidth;//offsetWidth获取元素宽度,clientWidth页面宽度
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=oBoxw*index+'px';
hArr[index]+=oBoxs[i].offsetHeight;
}
}
}
//根据class获取元素
function getByClass(parent,clsName){
var boxArr=new Array(),//用来存储获取到的所有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;
}
}
}
//检测是否具备了加载数据块的条件
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);
//滚动条滚动距离,混杂模式||标准模式
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;
}
