问答详情
源自:2-4 JavaScript实现瀑布流布局中图片排序

Uncaught TypeError: Cannot read property 'style' of null一样的代码为什么就是这个样子了

 

        window.onload=function(){

            waterFall('main','box');

        }

        function waterFall(parent,box){

//将main下的所有box类取出来

            var oParent=document.getElementById(parent);

            var num=getByClass(oParent,box);

            console.log(num.length);

//计算整个页面显示的列数(页面宽/box的宽)

            var oBoxW=num[0].offsetWidth;

            console.log(oBoxW);

 //对算出来的值取整

            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<num.length;i++){

                if(i<cols){

                    harr.push(num[i].offsetHeight);

                }else{

                //求数组中的最小值

                    var minh=Math.min.apply(null,harr); //求每一列图片的最小高度

                    var index=getMinhIndex(harr,minh);

                    num[i].style.position='absolute';

                    num[i].style.top=minh+'px';

//num[i].style.left=oBoxW*index+'px';

                    num[i].style.left=num[index].offsetLeft+'px';

                    harr[index]+=num[i].offsetHeight;

                }

            }

            console.log(harr);        }

        //根据class获取元素

        function getByClass(parent,clsName){

            var oBox=new Array(); //用来存取获取到的class为box的类

            var oElements=document.getElementsByTagName('*');

            for(var i=0; i<oElements.length;i++){

                if(oElements[i].className==clsName){

                    oBox.push(oElements[i]);//把一个值加入到数组当中

                }

            };

            return oBox;

        }

        function getMinhIndex(arr,minh){

            for(var i in arr){

                if(arr[i]==minh){

                    return i;

                }

            }

        }


提问者:前端女神 2016-02-10 18:20

个回答

  • 小尼采
    2016-04-09 16:18:51

    同问啊,我也出现这个问题

  • _Doogie
    2016-02-24 15:03:34

    上面定义的是oParents,下面写的是oParent.style...明白哪里错了吧?如果还出现这个错误,再检查下其他的有没有错

  • Jakki
    2016-02-17 17:41:01

    神啊,真想给你看看,可是你提问也得告诉俺哪一行出错撒,全贴出来咋整,不看