<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瀑布流</title>
<style type="text/css">
*{margin: 0;padding: 0}
#container{ 90%;margin:0 auto;}
.topic {200px; border:1px solid #ccc; border-radius:5px; padding:5px; box-shadow:5px 5px 5px #ccc; float:left; margin:5px;}
.topic img {200px;}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function(){
var conWidth=$("#container").innerWidth(),
toWidth=$(".topic").eq(0).outerWidth(),
cols=Math.floor(conWidth/toWidth),
spacing=(conWidth-toWidth*cols)/(cols+1);
var html="";
console.log(cols);
//向contaner容器中存放cols个列的盒子
for(var i=0;i<cols;i++){
html+="<div style='display:inline-block;vertical-align:top;"+toWidth+"px;margin-left:"+spacing+"px;'></div>"
}
var $conCols=$(html).appendTo("#container");
//遍历加载的图片
$(".topic").each(function(index,element){
var cur=index%cols;
$conCols.eq(cur).append(element);
});
//动态向页面添加图片
html="";
for(var i=16;i<56;i++){
html+="<div class='topic'><img src='img/"+i+".jpg'></div>";
}
$(html).each(function(index,element){
var cur=index%cols;
$conCols.eq(cur).append(element);
});
});
</script>
</head>
<body>
<div id="container">
<div class="topic"><img src="img/1.jpg"></div>
<div class="topic"><img src="img/2.jpg"></div>
<div class="topic"><img src="img/3.jpg"></div>
<div class="topic"><img src="img/4.jpg"></div>
<div class="topic"><img src="img/5.jpg"></div>
<div class="topic"><img src="img/6.jpg"></div>
<div class="topic"><img src="img/7.jpg"></div>
<div class="topic"><img src="img/8.jpg"></div>
<div class="topic"><img src="img/9.jpg"></div>
<div class="topic"><img src="img/10.jpg"></div>
<div class="topic"><img src="img/11.jpg"></div>
<div class="topic"><img src="img/12.jpg"></div>
<div class="topic"><img src="img/13.jpg"></div>
<div class="topic"><img src="img/14.jpg"></div>
<div class="topic"><img src="img/15.jpg"></div>
</div>
</body>
</html>