为什么我用js添加内容，最后用offsetHeight获取的高度只有81，不能实现效果
<!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>
* {
padding: 0;
margin: 0;
font-family: "微软雅黑";
font-size:16px;
border: none;
}
body {
background: #ddd;
}
a {
text-decoration: none;
color: #444;
}
a:hover {
color: #999;
}
img {
border: none;
}
.wrap {
width: auto;
height: auto;
margin: 0 auto;
position: relative;
}
.wrap div {
float: left;
box-sizing: border-box; /*还有content-box*/
width: 280px;
height: auto;
padding: 10px;
margin: 10px;
border-radius: 10px;
background: #fff;
/*position: absolute;*/
}
.wrap div img {
width: 100%;
}
.wrap div a {
font-size: 18px;
font-weight: bold;
display: block; /*这里要把它设置为行级元素才能用text-align，而且不能用margin*/
text-align: center;
line-height: 40px;
}// 交互设置
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)
}0
收起
正在回答 回答被采纳积分+1
1回答
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星