3-1 效果出不来问题

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

NanAyo

2017-08-14 22:09:30

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>瀑布流</title>
		<link rel="stylesheet" href="css/ppl.css" />
		<script src="js/ppl.js"></script>
	</head>
	<body>
		<!--容器-->
		<div id="wrap">
			<!--盒子18个-->
			<div><img src="img/01.PNG" alt="" /><a href="#">图片图片图片图片01</a></div>
			<div><img src="img/02.PNG" alt="" /><a href="#">图片图片图片图片02</a></div>
			<div><img src="img/03.PNG" alt="" /><a href="#">图片图片图片图片03</a></div>
			<div><img src="img/04.PNG" alt="" /><a href="#">图片图片图片图片04</a></div>
			<div><img src="img/05.PNG" alt="" /><a href="#">图片图片图片图片05</a></div>
			<div><img src="img/06.PNG" alt="" /><a href="#">图片图片图片图片06</a></div>
			<div><img src="img/07.PNG" alt="" /><a href="#">图片图片图片图片07</a></div>
			<div><img src="img/08.PNG" alt="" /><a href="#">图片图片图片图片08</a></div>
			<div><img src="img/09.PNG" alt="" /><a href="#">图片图片图片图片09</a></div>
			<div><img src="img/10.PNG" alt="" /><a href="#">图片图片图片图片10</a></div>
			<div><img src="img/11.PNG" alt="" /><a href="#">图片图片图片图片11</a></div>
			<div><img src="img/12.PNG" alt="" /><a href="#">图片图片图片图片12</a></div>
			<div><img src="img/13.PNG" alt="" /><a href="#">图片图片图片图片13</a></div>
			<div><img src="img/14.PNG" alt="" /><a href="#">图片图片图片图片14</a></div>
			<div><img src="img/15.PNG" alt="" /><a href="#">图片图片图片图片15</a></div>
			<div><img src="img/16.PNG" alt="" /><a href="#">图片图片图片图片16</a></div>
			<div><img src="img/17.PNG" alt="" /><a href="#">图片图片图片图片17</a></div>
			<div><img src="img/18.PNG" alt="" /><a href="#">图片图片图片图片18</a></div>
		</div>
	</body>
</html>

/*通配符*/
*
{
	margin: 0px;
	padding: 0px;
	border: none;
}
body
{
	background: #ddd;
}
img
{
	border: none;
}
a
{
	text-decoration: none;
	color: #444;
}
a:hover
{
	color: #999;
}

/*容器*/
#wrap
{
	position: relative;
	width: auto;
	height: auto;
	margin: 0 auto;
}
#wrap div
{
	float: left;
	box-sizing: border-box;
	width: 280px;
	height: auto;
	margin: 10px;
	padding: 10px;
	border-radius: 5px;
	background: #fff;
}
#wrap div img
{
	width: 100%;
}
#wrap div a
{
	display: block;
	font-size: 18px;
	font-weight: bold;
	line-height: 40px;
	text-align: center;
}

function waterfall(wrap,boxes)
{
	var boxWidth=boxes[0].offsetWidth+20;
	var windowWidth=document.documentElement.clientWidth;
	var colsNumber=Math.floor(windowWidth/boxWidth);
	
	wrap.style.width=boxWidth*colsNumber+'px';
};

window.onload=function()
{
	var wrap=document.getElementById('wrap');
	var boxes=document.getElementsByTagName('div');
	waterfall(wrap,boxes);
};

html,css,有效果，加上js之后，应该整体剧中显示，但是我这边效果是，一数列，效果不对，看了视频很多遍，不知道是什么问题？