出现Cannot read property 'style' of undefined错误

来源:2-4 JavaScript实现瀑布流布局中图片排序

zk785

2016-05-20 16:10

window.onload=function(){
    waterfall('main','box');
}

function waterfall(parent,box){
    //获取class为box的元素
    var oParent = document.getElementById(parent);
    var oBox= getByClass(oParent,box);
    //console.log(oBox.length);
    // 计算页面显示的列数(页面宽度/box宽)
    var oBoxw = oBox[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<oBox.length;i++){
        if(i<cols){
        hArr.push(oBox[i].offsetHeight);
        }
    }
    //console.log(hArr);
    var minH=Math.min.apply(null,hArr);
    //console.log(minH);
    var index = getMinH(hArr,minH);
    oBox[i].style.position='absolute';
    oBox[i].style.top=minH+'px';
    oBox[i].style.left=oBoxw*index+'px';
    hArr[index]+=oBox[i].offsetHeight;
}

//根据class获取元素
function getByClass(parent,clsName){
    var boxArr = [];
    oElements = parent.getElementsByTagName('*');
    for(var i=0;i<oElements.length;i++){
        if(oElements[i].className==clsName){
            boxArr.push(oElements[i]);
        }
    }
    return boxArr;
}
function getMinH(arr,val){
    for(var i in arr){
        if (arr[i]==val){
            return i;
        }
    }
}

25行出现错误,是哪里出的问题?


写回答 关注

1回答

  • 左边_右边
    2016-05-20 16:38:01
    已采纳

    oBox[i]的i都没了,for(var i=0;i<oBox.length;i++){

            if(i<cols){

            hArr.push(oBox[i].offsetHeight);

            }

        }

    变量是在for循环内定义的,你的i都跑变量外面来了,怎么会有,还有if if(i<cols),下面的代码不应该是else里面吗

    zk785

    非常感谢!

    2016-05-20 16:55:10

    共 1 条回复 >

瀑布流布局

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

97759 学习 · 736 问题

查看课程

相似问题