css - 个人设计的一个瀑布流js javascript中的offsetHeight获取不到值问题 这是个通过滚动条滚动不停穿件的瀑布流
黄舟
黄舟 2017-04-11 12:43:01
0
1
259
window.onload=function(){
    function falls(){
            //定义多少列;
            this.col=4;
        }
    var add = 1;
    var load_length=30;
    var curObj=new falls();
    //获取瀑布流的区域;
    var falls_main=document.getElementById("box_out");
    var falls_width=falls_main.offsetWidth;
    var main_ul=document.getElementById("falls");
    //获取li对象
    var falls=main_ul.getElementsByTagName("li");
    //获取内盒子
    var main_box=document.getElementById("box_in");
    
    //声明数组来获取存放高度;
    var arr=Array(curObj.col);

    for(var xy=0;xy<arr.length;xy++){
            arr[xy]=0;
        }

    for(var jj=0;jj<load_length;jj++){
        createEle();
    }

    for(var i=0;i<falls.length;i++){
        falls[i].onclick=function(){
            
        }
    }

    function createEle(){
            var new_img=document.createElement("img");
            var new_li=document.createElement("li");
            new_li.style.width=falls_width/(curObj.col)+"px";
            new_img.setAttribute("src",add+".jpg");
            new_li.appendChild(new_img);
            new_img.style.display="bloxk";
            new_img.style.width="100%";
            new_img.style.height="auto";
            
            main_ul.appendChild(new_li);
            
            if(add<3){
                add++;
            }else{
                add=1;
            }
            var li_length=(main_ul.getElementsByTagName("li").length-1)%4;
            new_li.style.position="absolute";
            ElePosition(new_li,li_length);
            
            // new_li.style.backgroundColor="#"+(Math.round((Math.random()*4095))).toString(16);    
    }

    function ElePosition(new_li,li_length){
        new_li.style.top=arr[li_length]+"px";
        
        //下面这行代码在火狐中都能正常获取到值,但为什么在谷歌会出现获取不到值
        ***arr[li_length]+=new_li.offsetHeight;***
        
        console.log(arr[li_length])
        new_li.style.left=(li_length)*(falls_width/(curObj.col))+"px";
    }
    main_box.onscroll=function(){
        createEle();
        var top_hidden=document.all.box_in.scrollTop;

        
    }
    document.all.close_window.onclick=function(){
        document.all.falls_bigImg_bg.style.display="none";
    }
    
}

这个代码在火狐中都能正常运行,但为什么在谷歌中
黄舟
黄舟

人生最曼妙的风景,竟是内心的淡定与从容!

최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!