[求教(ㄒoㄒ)]每次刷新，布局就会出现奇怪的变化，，每次都不一样，为啥
<!DOCTYPE html>
<html>
<head>
<title>waterfall</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="CSS/waterfall.css">
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<style type="text/css">
*{
margin:0;
padding:0;
text-decoration:none;
}
body{
background-color:#eee;
}
a{
color:#bbb;
}
a:hover{
color:rgb(131,203,172);
}
#wrap{
margin:0 auto;
text-align:center;
position:relative;
}
.boxes{
box-sizing:border-box;
background-color:#fff;
width:280px;
margin:10px;
border-radius:8px;
float:left;
}
.boxes>img{
border-radius:8px 8px 0 0;
width:100%;
display:block;
}
.boxes>a{
display:block;
line-height:30px;
text-align:center;
}
</style>
</head>
<body>
<div id="wrap">
<div class="boxes">
<img src="IMG/img1.jpg">
<a href="">city of star</a>
</div>
<div class="boxes">
<img src="IMG/img2.jpg">
<a href="">a glance</a>
</div>
<div class="boxes">
<img src="IMG/img3.jpg">
<a href="">there is a bar</a>
</div>
<div class="boxes">
<img src="IMG/img4.jpg">
<a href="">or one more dream</a>
</div>
<div class="boxes">
<img src="IMG/img5.jpg">
<a href="">a rush</a>
</div>
<div class="boxes">
<img src="IMG/img6.jpg">
<a href="">a dance</a>
</div>
<div class="boxes">
<img src="IMG/img7.jpg">
<a href="">that I can not to see</a>
</div>
<div class="boxes">
<img src="IMG/img8.jpg">
<a href="">to open a world</a>
</div>
<div class="boxes">
<img src="IMG/img9.jpg">
<a href="">or one more dream</a>
</div>
<div class="boxes">
<img src="IMG/img10.jpg">
<a href="">and seed them reeling</a>
</div>
<div class="boxes">
<img src="IMG/img11.jpg">
<a href="">a rat-tat-tat on my heart</a>
</div>
<div class="boxes">
<img src="IMG/img12.jpg">
<a href="">there's so much that I can't see</a>
</div>
<div class="boxes">
<img src="IMG/img13.jpg">
<a href="">I need this crazy feeling</a>
</div>
<div class="boxes">
<img src="IMG/img14.jpg">
<a href="">that I can not to see</a>
</div>
<div class="boxes">
<img src="IMG/img15.jpg">
<a href="">all we're looking for is love</a>
</div>
<div class="boxes">
<img src="IMG/img16.jpg">
<a href="">are you shining just for me</a>
</div>
<div class="boxes">
<img src="IMG/img17.jpg">
<a href="">I felt it</a>
</div>
<div class="boxes">
<img src="IMG/img18.jpg">
<a href="">the first embrace I share with you</a>
</div>
<div class="boxes">
<img src="IMG/img19.jpg">
<a href="">that now our dream</a>
</div>
<div class="boxes">
<img src="IMG/img20.jpg">
<a href="">they've finally come true</a>
</div>
<div class="boxes">
<img src="IMG/img21.jpg">
<a href="">city of stars</a>
</div>
<div class="boxes">
<img src="IMG/img22.jpg">
<a href="">just one thing everybody wants</a>
</div>
<div class="boxes">
<img src="IMG/img23.jpg">
<a href="">to look in somebody's eyes</a>
</div>
<div class="boxes">
<img src="IMG/img24.jpg">
<a href="">to light up the skies</a>
</div>
<div class="boxes">
<img src="IMG/img25.jpg">
<a href="">a voice that say</a>
</div>
<div class="boxes">
<img src="IMG/img26.jpg">
<a href="">I will be there</a>
</div>
<div class="boxes">
<img src="IMG/img27.jpg">
<a href="">and you will be alright</a>
</div>
<div class="boxes">
<img src="IMG/img28.jpg">
<a href="">Think I wanna to stay</a>
</div>
</div>
</body>
//瀑布流
function waterfall(wrap,box){
//获取可显示的列数
var boxwidth=box.eq(0).width()+20,
windowwidth=$(window).width(),
colsnumber=Math.floor(windowwidth/boxwidth);
//设置容器宽度
wrap.width(boxwidth*colsnumber)
//数组存储每一个高度
var i=0,
colsheight=new Array();
for(i=0;i<box.length;i++){
if(i<colsnumber){
colsheight[i]=box.eq(i).height()+20;
}
else{
//找到目前最小高度
var I=0,
minindex=0,
minheight=colsheight[0];
for(I=0;I<colsheight.length;I++){
colsheight[I]<minheight?minheight=colsheight[I]:minheight;
}
//找到最小高度的box的索引
for(I=0;I<colsheight.length;I++){
colsheight[I]==minheight?minindex=I:minindex;
}
//设置定位
var leftvalue=box.eq(minindex).position().left,
topvalue=minheight;
box.eq(i).css({
"position":"absolute",
"top":topvalue+"px",
"left":leftvalue+"px"
})
//更新数组中的高度值
colsheight[minindex]+=box.eq(i).height()+20;
}
}
}
var wrap=$("#wrap"),
box=$(".boxes");
waterfall(wrap,box);
</html>
