为什么jQurey没有实现居中显示啊？
<!DOCTYPE html>
<html>
<head>
<title>瀑布流布局</title>
<meta charsett="utf-8">
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="jquery 1.12.2.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="main">
<div class="box">
<div class="pic">
<img src="Images/0.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="Images/1.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="Images/2.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="Images/3.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="Images/4.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="Images/5.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="Images/6.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="Images/7.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="Images/8.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="Images/9.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="Images/10.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="Images/11.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="Images/12.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="Images/13.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="Images/14.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="Images/15.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="Images/16.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="Images/17.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="Images/18.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="Images/19.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="Images/20.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="Images/21.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="Images/22.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="Images/23.jpg"/>
</div>
</div>
</div>
</body>
</html>
---------------------------------------------------
$(window).on('load',function(){
waterfall();
})
function waterfall(){
var $boxs=$('#main>div');
var w=$boxs.eq(0).outerWidth();
var cols=Math.floor($(window).width()/w);
$('#main').width(w*cols).css('margin','0 auto');
}
--------------------------------------------------------
