百思不得其解
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>瀑布流</title>
</head>
<style type="text/css">
*{
margin:0;
padding: 0;
border-style: none;
}
body{
background-color:#e4dbe4;
}
#wrap{
width: auto;
height: auto;
margin:0 auto;
padding:30px;
}
#wrap>div{
width:280px;
height: auto;
float: left;
margin:10px;
box-sizing:border-box;
background-color: rgb(255,255,255);
border-radius: 5px;
padding: 10px;
}
#wrap >div >img{
width: 100%;
}
#wrap > div >a{
padding: 10px;
display: block;
text-decoration: none;
color: black;
text-align: center;
font-weight: bold;
font-size: 18px;
border-style: none;
overflow:hidden;
}
</style>
<body>
<div id="wrap">
<div>
<img src="images/1.png">
<a href="http://www.imooc.com" target="_blank">第一怪 竹筒当烟袋</a>
</div>
<div>
<img src="images/2.png">
<a href="http://www.imooc.com" target="_blank">第二怪 草帽当锅盖</a>
</div>
<div>
<img src="images/3.png">
<a href="http://www.imooc.com" target="_blank">第三怪 这边下雨那边晒</a>
</div>
<div>
<img src="images/4.png">
<a href="http://www.imooc.com" target="_blank">第四怪 四季服装同穿戴</a>
</div>
<div>
<img src="images/5.png">
<a href="http://www.imooc.com" target="_blank">第五怪 火车没有汽车快</a>
</div>
<div>
<img src="images/6.png">
<a href="http://www.imooc.com" target="_blank">第六怪 火车不通国内通国外</a>
</div>
<div>
<img src="images/7.png">
<a href="http://www.imooc.com" target="_blank">第七怪 老奶爬山比猴快</a>
</div>
<div>
<img src="images/8.png">
<a href="http://www.imooc.com" target="_blank">第八怪 鞋子后面多一块</a>
</div>
<div>
<img src="images/9.png">
<a href="http://www.imooc.com" target="_blank">第九怪 脚趾四季露在外</a>
</div>
<div>
<img src="images/10.png">
<a href="http://www.imooc.com" target="_blank">第十怪 鸡蛋拴着卖</a>
</div>
<div>
<img src="images/11.png">
<a href="http://www.imooc.com" target="_blank">第十一怪 粑粑叫饵块</a>
</div>
<div>
<img src="images/12.png">
<a href="http://www.imooc.com" target="_blank">第十二怪 花生蚕豆数着卖</a>
</div>
<div>
<img src="images/13.png">
<a href="http://www.imooc.com" target="_blank">第十三怪 三个蚊子一盘菜</a>
</div>
<div>
<img src="images/14.png">
<a href="http://www.imooc.com" target="_blank">第十四怪 四个老鼠一麻袋</a>
</div>
<div>
<img src="images/15.png">
<a href="http://www.imooc.com" target="_blank">第十五怪 树上松毛扭着卖</a>
</div>
<div>
<img src="images/16.png">
<a href="http://www.imooc.com" target="_blank">第十六怪 姑娘叫老太</a>
</div>
<div>
<img src="images/17.png">
<a href="http://www.imooc.com" target="_blank">第十七怪 小和尚可以谈恋爱</a>
</div>
<div>
<img src="images/18.png">
<a href="http://www.imooc.com" target="_blank">第十八怪 背着娃娃谈恋爱</a>
</div>
</div>
<script type="text/javascript">
window.onload=function(){
var wrap=document.getElementById('wrap');
//console.log(wrap);
var boxes=wrap.getElementsByTagName('div');
watefall(wrap,boxes);
};
function watefall(wrap,boxes){
// 获取盒子的宽度加内外边距20
var boxWidth=boxes[0].offsetWidth + 20;
// 获取屏幕的宽度
var windowWidth = document.documentElement.clientWidth;
// 将屏幕的宽度除以盒子的宽度能获取一行可以放多少个
var colsNumber = Math.floor(windowWidth / boxWidth);
// 设置容器的宽度 ， 可以居中显示
wrap.style.width=boxWidth*colsNumber +'px';
// 定义一个数组并存储每一列的高度
var everyHeight = new Array();
for (var i = 0; i < boxes.length; i++) {
// console.log(i);
if(i<colsNumber){
if(i==0){
// console.log(boxes[i].offsetHeight);
}
everyHeight[i]=boxes[i].offsetHeight+20;
// console.log(everyHeight);
}else{
var minHeight=Math.min.apply(null,everyHeight);
// console.log(Math.min(everyHeight));
// console.log(Math.min.apply(null,everyHeight));
var minIndex = getIndex(minHeight,everyHeight);
var leftValue=boxes[minIndex].offsetLeft - 10;
boxes[i].style.position='absolute';
boxes[i].style.top=minHeight +'px';
boxes[i].style.left=leftValue +'px';
everyHeight[minIndex] +=boxes[i].offsetHeight;
}
}
};
function getIndex(minHeight ,everyHeight){
for(index in everyHeight){
if(everyHeight[index] == minHeight){
return index;
}
}
}
</script>
</body>
</html>我在每个div中的a标签设置成了block块级元素，然后给a标签的内边距设置了padding:10px撑了20px出来。div的高度设置是auto自动撑开的，瀑布流布局用js代码获取div的高度boxes[i].offsetHeight竟然获取的a标签没撑开之前的高度？ 这是为什么 我想我已经表达的很清楚。求老师指点迷津
2
收起
正在回答 回答被采纳积分+1
1回答
好帮手慕慕子
2019-03-20 18:47:26
同学你好， offsetHeight是获取元素的高度包括元素height、内边距和边框，但是不包括外边距
所以如下方式获取div元素高度, a是它的子元素，这里div的高度是由子元素撑开的，这里获取到的这个高度是包括a占据的高度的（包括其内边距），不过由于offsetHeight的特点，导致没有获取到div的外边距值，整体高度有误差，这里在获取高度之后，添加下外边距值，如下：
同理在获取最小列的高度时，也需要添加这个外边距值，例：
最外层盒子设置内边距导致第一行没有设置定位的元素距离顶部有30px距离，第二行元素设置绝对定位参考的是页面顶部位置，导致第二行与第一行之间没有间距，取消合作的外边距，例：
如果还有不明白的地方可以在问答区提问，老师帮你找到合适的解决方案.
如果解决了你的疑惑，欢迎采纳
祝学习愉快~~~
相似问题
不得不吐槽下这个案例的讲解思路
97
1
8
有个问题百思不得其解
0
0
1
老师您好，我百思不得其解!
162
5
13
老师帮帮我，百思不得其解!
7
1
1
求参考答案...想得头都要炸了~
126
3
7
登录后可查看更多问答，登录/注册
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星