觉得腾讯微博微频道里的那种布局方式很好，在这里利用CSS3简单的实现了一下。
先上一张效果图：
代码：
pubu.css
/* CSS Document */
.container{
width:60%;
margin-left:20%;
margin-right:20%;
background:#61A5D1;
float:right;
/*盒子*/
-webkit-column-width:160px;
-moz-column-width:160px;
-o-colum-width:160px;
-webkit-column-gap:1px;
-moz-column-gap:1px;
-o-column-gap:1px;
}
.box{
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
background:#D9D9D9;
border::#CCC 1px solid;
display:inline-block;
width:180px; /*当把大小调成200，就会左右重合，不知道是什么问题*/
position:relative;
margin:5px;
}
pubu.html:
<!DOCTYPE> <html> <head> <meta charset="utf-8"> <link href="style/pubu.css" rel="stylesheet" type="text/css" /> <title>CSS3瀑布布局</title> </head> <body> <div class="container"> <!--经过试验，这里只能写成class="container“，如果写成id="container"会变成底部对齐--> <div class="box"><img src="image/1.jpg" width="180px" />别小看我，我绝对不会放弃。我接受考试，就算一生只能当下忍，我也会成为火影给你们看的，没什么了不起的。——漩涡鸣人。（明天高考，做一个永远追梦的人）#火影忍者#</div> <div class="box"><img src="image/2.jpg" width="180px" />我们依然坚强战胜每一次挫折,只是因为我们还活着.#火影忍者#</div> <div class="box"><img src="image/3.jpg" width="180px" />你只看到我在不停的忙碌，却没看到我奋斗的热情。你有朝九晚五，我有通宵达旦。你否定我的现在，我决定我的未来。你可以轻视我的存在，我会用代码证明这是谁的时代！梦想是注定孤独的旅行，路上少不了质疑和嘲笑，但那又怎么样 。哪怕遍体鳞伤 也要coding。我是java程序员 我为自己代言！</div> <div style="height:150px" class="box"></div> <div style="height:320px" class="box"></div> <div style="height:340px" class="box"></div> <div style="height:220px" class="box"></div> <div style="height:270px" class="box"></div> <div style="height:220px" class="box"></div> <div style="height:220px" class="box"></div> </div> </body> </html>
在这里只是简单的实现了一下，其中也存在一些问题没解决，而且不是很好看，大家可以自己美化一下。