3-1问题，为什么我打印出来的是0

来源：3-1 JS实现瀑布流布局

慕娘9386890

2017-09-23 10:16:46

window.onload=function(){
    var wrap=document.getElementById('wrap');
    var boxes=document.getElementsByTagName('div');
    aaaaa(wrap,boxes)
}
function aaaaa(wrap,boxes){
    var boxWidth=boxes[0].offsetWidth + 20;
    var windowWidth=document.documentElement.clientWidth;
    var colsNumber=Math.floor(windowWidth / boxWidth);
    console.log(colsNumber)
}

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>瀑布流</title>
<link type="text/css" href="index.css" rel="stylesheet">
</head>
<body>
<div id="wrap">
    <div><a><img src="images/1.png">第一怪 竹筒当烟袋</a></div>
    <div><a><img src="images/2.png">第二怪 草帽当锅盖</a></div>
    <div><a><img src="images/3.png">第三怪 这边下雨那边晒</a></div>
    <div><a><img src="images/4.png">第四怪 四季服装同穿戴</a></div>
    <div><a><img src="images/5.png">第五怪 火车没有汽车快</a></div>
    <div><a><img src="images/6.png">第六怪 火车不通国内通国外</a></div>
    <div><a><img src="images/7.png">第七怪 老奶爬山比猴快</a></div>
    <div><a><img src="images/8.png">第八怪 鞋子后面多一块</a></div>
    <div><a><img src="images/9.png">第九怪 脚趾四季漏在外</a></div>
    <div><a><img src="images/10.png">第十怪 鸡蛋拴着买</a></div>
    <div><a><img src="images/11.png">第十一怪 粑粑叫饵快</a></div>
    <div><a><img src="images/12.png">第十二怪 花生蚕豆数着卖</a></div>
    <div><a><img src="images/13.png">第十三怪 三个文字一盘菜</a></div>
    <div><a><img src="images/14.png">第十四怪 四个竹鼠一麻袋</a></div>
    <div><a><img src="images/15.png">第十五怪 树上松毛扭着卖</a></div>
    <div><a><img src="images/16.png">第十六怪 姑娘叫老太</a></div>
    <div><a><img src="images/17.png">第十七怪 小和尚可以谈恋爱</a></div>
    <div><a><img src="images/18.png">第十八怪 背着娃娃再恋爱</a></div>
</div>

    <script src="../jquery-3.2.1.js"></script>
    <script src="javascrip.js">
    </script>
</body>
</html>

body{
    background-color: beige;
}
#wrap{
    width:auto;
    height:auto;
    margin: auto;
    position: relative;
}
#wrap div{
    width:280px;
    height:auto;
    float: left;
    margin: 10px;
    padding: 10px;
    box-sizing: border-box;
    background: #fff;
}

#wrap div img{
    width:100%;
    height:auto;
}
a{
    display: block;
    text-align: center;
    line-height: 40px;
    font-size: 18;
    font-weight: bold;
}

写回答

1回答