3-1视频问题
来源：3-1 JS实现瀑布流布局
慕运维3752689
2018-03-06 16:05:45
麻烦老师帮我看一下，我的容器为什么不能居中显示：
html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>瀑布流——云南十八怪</title>
<link href="../css/style.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="../javascript/script.js"></script>
</head>
<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>
</body>
</html>
CSS:
@charset "utf-8";
/* CSS Document */
*{
margin: 0;
padding: 0;
border: none;
}
body{
background: #ddd;
}
img{
border: none;
}
a{
text-decoration: none;
color:#444;
}
a:hover{
color: #999;
}
/*wrap*/
#wrap{
position: relative;
width: auto;
height: auto;
margin: 0 auto;
}
#wrap > div {
float: left;
width: 280px;
height: auto;
margin: 10px;
padding: 10px;
border-radius: 5px;
background: #fff;
box-sizing: border-box;
}
#wrap > div > img {
width: 100%;
}
#wrap > div > a {
display: block;
font-size: 18px;
font-weight: bold;
line-height: 40px;
text-align: center;
}
JS:
// JavaScript Document
function waterfall(wrap,boxes){
//获取第一个盒子的宽度（offsetWidth只能取到从边框到边框的距离)
var boxWidth=boxes[0].offsetWidth+20;
//获取我们整个视觉的宽度
var windowWidth=document.documentElement.clientWidth;
//获取列的数目(向下取整)
var colsNumber=Math.floor(windowWidth/boxWidth);
//设置容器的宽度
wrap.style.width=boxWidth*colsNumber+'px';
}
//这一步表示在html和css加载完之后再调用这一部分
window.onload=function(){
var wrap=document.getElementById('wrap');
var boxes=wrap.getElementsByTagName('div');
waterfall(wrap,boxes);
};
我的效果图：
3回答
-
好帮手慕糖
2018-03-06
你好，经测试，去掉js代码之后会发现整体没有实现居中，建议：可测试下js代码是否引入成功。
祝学习愉快~
0 -
慕运维3752689
提问者
2018-03-06
那我的电脑运行出来的效果是这样的：
这可能会是什么情况呢？换了几个浏览器都是一样的
0 -
好帮手慕糖
2018-03-06
你好，如下，根据代码测试，整体是可以居中显示的
祝学习愉快~
0
相似问题