为什么我的offsetTop获取到的值是不正确的?

来源:2-7 编程练习

刘一_53707959

2016-09-18 23:18

window.onload=function(){
        waterfall();

        window.onscroll=function(){
            
    var parent=document.getElementById("main");
    var boxs=getByClass(parent,"box");
    var scrollH=document.documentElement.scrollTop||document.body.scrollTop;
       var documentH=scrollH+document.documentElement.clientHeight;
    var    lastH=boxs[boxs.length-1].offsetTop+Math.floor(boxs[boxs.length-1].offsetHeight/2);
       /*763*/
    
        if(lastH-350<documentH){      //这里的lastH不减掉350,就无法进入if语句???
                                /*465*/

dataInt={"data":[{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"7.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"}]};

for(var i=0;i<dataInt.data.length;i++){
        var divB=document.createElement("div");
        divB.className="box";
        parent.appendChild(divB);
        var divP=document.createElement("div");
        divP.className="pic";

        divB.appendChild(divP);

        myimg=document.createElement("img");
        myimg.src="./images/"+dataInt.data[i].src;
        
        divP.appendChild(myimg);
}
waterfall();
}
}


}

function waterfall(){
    
var oParent=document.getElementById("main");
var boxs=getByClass(oParent,"box");
var boxW=boxs[0].offsetWidth;
var num=Math.floor(document.documentElement.clientWidth/boxW);
oParent.style.cssText="width:"+boxW*num+"px;margin:0 auto;";
 
    boxHarr=new Array();
    for(var i=0;i<boxs.length;i++){
        if(i<num){
            boxHarr.push(boxs[i].offsetHeight);
        }else{
          
            var minH=Math.min.apply(null,boxHarr);
            var minHindex=getminHindex(boxHarr,minH);
            boxs[i].style.position="absolute";
            boxs[i].style.top=minH+"px";
            boxs[i].style.left=minHindex*boxW+"px";
            //boxs[i].style.left=boxs[minHindex].offsetLeft+"px";
            boxHarr[minHindex]=boxHarr[minHindex]+boxs[i].offsetHeight;
        }
    }

}

function getByClass(parent,clsName){

    a=parent.getElementsByTagName('*');
    var arr=[];
    for(var i=0;i<a.length;i++){
        if(a[i].className==clsName){
            arr.push(a[i]);
        }
    }
    return arr;
}


function getminHindex(arr,minH){
    
    for(var i in arr){
        if(arr[i]==minH)
            return i;    
    }

}



写回答 关注

2回答

  • qq_阿湃_0
    2019-01-15 14:46:36

    用这个试试:

      boxHarr[minHindex]=boxHarr[minHindex]+boxs[i].scrollTop;


  • 慕粉1472138458
    2016-09-19 11:57:34

    有没有给包裹的父元素家相对定位啊

    刘一_537...

    为什么要给父元素加相对定位,我的代码逻辑没有一点问题啊,完全可以正常运行,就是必须减掉350,否则不满足if语句的条件

    2016-09-19 18:06:44

    共 1 条回复 >

瀑布流布局

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

97759 学习 · 736 问题

查看课程

相似问题