为什么我用js添加内容,最后用offsetHeight获取的高度只有81,不能实现效果

为什么我用js添加内容,最后用offsetHeight获取的高度只有81,不能实现效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="../css/index.css">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="../js/javascript.js"></script>
</head>
<body>
<div class="wrap" id="wrap">
 
</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
* {
    padding0
    margin0;
    font-family"微软雅黑";
    font-size:16px;
    bordernone;
}
 
body {
    background#ddd;
}
a {
    text-decorationnone;
    color#444;
}
 
a:hover {
    color#999;
}
 
img {
    bordernone;
}
 
 
.wrap {
    widthauto;
    heightauto;
    margin0 auto;
    positionrelative;
}
 
 
.wrap div {
    floatleft;
    box-sizing: border-box; /*还有content-box*/
    width280px;
    heightauto;
    padding10px;
    margin10px;
    border-radius: 10px;
    background#fff;
 
    /*position: absolute;*/
}
 
.wrap div img {
    width100%;
}
 
.wrap div a {
    font-size18px;
    font-weightbold;
    displayblock;        /*这里要把它设置为行级元素才能用text-align,而且不能用margin*/
    text-aligncenter;
    line-height40px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
// 交互设置
 
var data = [{
    "src" "1.png",
    "title" "第一怪 竹筒当烟袋"
}, {
    "src" "2.png",
    "title" "第二怪 草帽当锅盖"
}, {
    "src" "3.png",
    "title" "这边下雨那边晒"
}, {
    "src" "4.png",
    "title" "第四怪 四季服装同穿戴"
}, {
    "src" "5.png",
    "title" "第五怪 火车没有汽车快"
}, {
    "src""6.png",
    "title""第六怪 火车不通国内通国外"
},{
    "src""7.png",
    "title""第七怪 老奶奶爬山比猴快"
},{
    "src""8.png",
    "title""第八怪 鞋子后面多一块"
},{
    "src""9.png",
    "title""第九怪 脚趾四季露在外"
},{
    "src""10.png",
    "title""第十怪 鸡蛋栓着卖"
},{
    "src""11.png",
    "title""第十一怪 粑粑叫饵块"
},{
    "src""12.png",
    "title""第十二怪 花生蚕豆数着卖"
},{
    "src""13.png",
    "title""第十三怪 三个蚊子一盘菜"
},{
    "src""14.png",
    "title""第十四怪 四个老鼠一麻袋"
},{
    "src""15.png",
    "title""第十五怪 树上松毛扭着卖"
},{
    "src""16.png",
    "title""第十六怪 姑娘叫老太"
},{
    "src""17.png",
    "title""第十七怪 小和尚可以谈恋爱"
},{
    "src""18.png",
    "title""第十八怪 背着娃娃谈恋爱"
}]
 
 
var addBaseContent = function (wrap) {
    for (var i=0; i<data.length; i++) {
        wrap.innerHTML += '<div><img src="../images/'+data[i].src+'" alt=""><a href="">'+data[i].title+'</a></div>';
    };
};
 
var getMinIndex = function (arr, ht) {
    for (index in arr) {
        if (arr[index] == ht) {
            return index;
        /*else {    //这里不能加return false会结束循环
            return false;
        }*/
    }
}
 
var waterfall = function (wrap, boxes) {
    var boxesWidth = boxes[0].offsetWidth + 20,
        // windowWidth = window.innerWidth,这个方法也可以获得窗口的宽度;
        windowWidth = document.documentElement.clientWidth,
        boxesNum = Math.floor(windowWidth / boxesWidth);
    wrap.style.width = boxesNum * boxesWidth + 'px';
 
    var elementArr = new Array();
    for (var i=0; i<boxes.length; i++) {
        if (i < boxesNum) {
            elementArr[i] = boxes[i].offsetHeight + 20;
        else {
            var minHeight = Math.min.apply(null, elementArr),
                minIndex = getMinIndex(elementArr, minHeight),
                minLeft = boxes[minIndex].offsetLeft - 10; //这里写错了,写成了数组
 
            boxes[i].style.position = "absolute";
            boxes[i].style.left = minLeft + 'px';
            boxes[i].style.top = minHeight + 'px';
 
            elementArr[minIndex] += boxes[i].offsetHeight + 20; //这个数组本身就是高度的值
        }  
    
}
 
 
window.onload = function () {
 
    var wrap = document.getElementById('wrap');
    //添加初始元素
    addBaseContent(wrap); 
    var boxes = wrap.getElementsByTagName('div');
    console.log(boxes[1].offsetHeight) //打印出来的高度只有81
    waterfall(wrap, boxes);
 
    console.log(boxes[0].offsetHeight)
}


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
好帮手慕夭夭 2018-12-17 17:33:38

你好同学 ,因为代码中图片默认显示的图片也是使用的js动态加载 ,所以可能会由于还没加载过来 ,就已经获取的div的高度 , 导致高度获取的不准确 . 根据视频中讲解 , 建议在html设置18张默认的图片 ,这些不需要动态追加 如下:

http://img1.sycdn.imooc.com//climg/5c176cd7000125a006760635.jpg

如下默认的图片就可以正常的显示了

http://img1.sycdn.imooc.com//climg/5c176d5a00019a7119090911.jpg

然后动态追加的盒子的你滚动页面时候 , 判断滚动的高度加上窗口的高度等于最后一排图片距离文档的高度时候 ,才去追加盒子 .这一块内容比较多 , 建议同学先再看一下视频 , 或者下载源码进行参考去修改 .

希望能够帮到你 , 祝学习愉快 ,望采纳 .

  • 老师,我也和这个同学一样用数据动态生成元素然后挂载到wrap里,但是因为生成元素和获取offsetHeight是同步过程,图片不加载完就无法获取正确的offsetHeight,所以我用了异步,把获取offset的过程放进了setTimeOut里,在打开控制台的情况可以正确获取,但是关了控制台以后居然就不行了,太神奇,怎么都想不通,这是为什么啊,老师
    2019-01-22 03:32:53
  • 你好 , 建议同学在问答区域创建一个问题 , 然后把代码完整粘贴上来 , 以便老师帮助你准确的分析问题 .
    2019-01-22 11:33:03
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师
插入代码