老师！问个问题！
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/css.css"> <script type="text/javascript" src="jQuery/script.js"></script> </head> <body> <div id="wrap"> <div><img src="images/1.png"><a href="http:www.imooc.com//">第一怪 竹筒当烟袋</a></div> <div><img src="images/2.png"><a href="http:www.imooc.com//">第二怪 草帽当锅盖</a></div> <div><img src="images/3.png"><a href="http:www.imooc.com//">第三怪 这边下雨那边晒</a></div> <div><img src="images/4.png"><a href="http:www.imooc.com//">第四怪 四季服装同穿戴</a></div> <div><img src="images/5.png"><a href="http:www.imooc.com//">第五怪 火车没有汽车快</a></div> <div><img src="images/6.png"><a href="http:www.imooc.com//">第六怪 火车不通过内通国外</a></div> <div><img src="images/7.png"><a href="http:www.imooc.com//">第七怪 老奶奶爬山比猴快</a></div> <div><img src="images/8.png"><a href="http:www.imooc.com//">第八怪 鞋子后面多一块</a></div> <div><img src="images/9.png"><a href="http:www.imooc.com//">第九怪 脚趾四季漏在外</a></div> <div><img src="images/10.png"><a href="http:www.imooc.com//">第十怪 鸡蛋拴着卖</a></div> <div><img src="images/11.png"><a href="http:www.imooc.com//">第十一怪 粑粑叫饵块</a></div> <div><img src="images/12.png"><a href="http:www.imooc.com//">第十二怪 花生蚕豆数着买</a></div> <div><img src="images/13.png"><a href="http:www.imooc.com//">第十三怪 三个蚊子一盘菜</a></div> <div><img src="images/14.png"><a href="http:www.imooc.com//">第十四怪 四个老鼠一麻袋</a></div> <div><img src="images/15.png"><a href="http:www.imooc.com//">第十五怪 树上松毛扭着买</a></div> <div><img src="images/16.png"><a href="http:www.imooc.com//">第十六怪 姑娘叫老太</a></div> <div><img src="images/17.png"><a href="http:www.imooc.com//">第十七怪 小和尚可以谈恋爱</a></div> <div><img src="images/18.png"><a href="http:www.imooc.com//">第十八怪 背着娃娃谈恋爱</a></div> </div> </body> </html>
/* 通配符 */
*{
margin:0px;
padding:0px;
border:none;
}
body{
background-color:#e0f8dc;
}
#wrap{
position:relative;
width:auto;
height:auto;
margin:0 auto;
}
a{
text-decoration:none;
color:#444;
}
#wrap div a{
display:block;
font-size:20px;
font-family:"宋体";
line-height:40px;
text-align:center;
font-weight:bold;
}
#wrap div{
width:280px;
box-sizing:border-box;
height:auto;
float:left;
margin: 0 10px;
padding:10px;
border-radius:8px;
background-color:#fff;
}
#wrap div img{
width:100%;
height:100%;
}
a:hover{
color:#999;
}function byid(id){
return document.getElementById(id);
}
function byname(name){
return document.getElementsByTagName(name);
}
window.onload=function(){
var wrap=byid('wrap');
var boxes=wrap.getElementsByTagName('div');
var windowwidth=document.documentElement.clientWidth;
var boxeswidth=boxes[0].offsetWidth+20;
var lieheight=new Array;
console.log(boxeswidth)
var lie=Math.floor(windowwidth/boxeswidth);
console.log(lie)
wrap.style.width=lie*boxeswidth+'px';
for(var i=0;i<boxes.length;i++){
if(i<lie){
lieheight[i]=boxes[i].offsetHeight+20;
console.log(lieheight);
}else{console.log(lieheight)
var minheight=Math.min.apply(null,lieheight);
var minboxindex=index(minheight,lieheight);
boxes[i].style.position='absolute';
boxes[i].style.left=boxes[minboxindex].offsetLeft-10 +'px';
boxes[i].style.top=lieheight[minboxindex]+'px';/*问题在这里！！为什么我在这一行加入20影响不到第三行的排版！只能影响到第二行呢？*/
lieheight[minboxindex]+=boxes[i].offsetHeight+20;/*再这里加上20，我知道是直接改变了第一行所有高度数组中最小的值，在这里加可以影响到第三行的排版，为什么在上面那行就不行呢，按说在上面那一行加20以后应该第三行跟第二行也能空出来间隙啊！offsetHeight获取的不是边框以内的高度吗？我在上面那一行加上了20当第三行的第一个盒子排版的时候读到上面那句话应该也加20不是吗？*/
}
}
function index(minheight,lieheight){
for(var o=0;o<lieheight.length;o++){
if(lieheight[o]==minheight){
return o;
}
}
}
}1
收起
正在回答
2回答
同学你好，理解的是正确的哦！继续加油！
小白00000000000痴
2019-02-28 14:44:01
老师！我想明白了！boxes[i].style.top=lieheight[minboxindex]+20+'px';在这句话里！加上20的话！并不会改变第一行所有高度的的集合数组lieheight里面的值！所以！假如第一行最小的盒子是300第二行的也是300！我在那里加上20，到第三行定位的时候，走到这句代码是600+20！所以是紧贴第二行！
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星