为什么我使用dataInt拉滚动条不会加载图片呢

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

9磅15便士

2018-02-07 00:34

这样写是可以加载的,下面的情况是不能加载的

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;
    
    
    
    
    
}

写回答 关注

1回答

瀑布流布局

瀑布流布局是网站比较流行的一种布局方式,教你实现三大方式

97759 学习 · 736 问题

查看课程

相似问题