<style>
.water ul{
/* 栏宽度 */
-webkit-column-width:100px;
-moz-column-width:100px;
-o-colum-width:100px;
column-width:100px;
/* 两栏之间的间距 */
-webkit-column-gap:1px;
-moz-column-gap:1px;
-o-column-gap:1px;
column-gap:1px;
}
.water li{
background:#0CF;
border:#069 1px solid;
display:inline-block;
width:100px;
margin:5px 0;
}
</style>
<div class=”water”>
<ul>
<li><img src=”http://www.lovexpp.org/view/public/img/pre_view.png” width=”100″></li>
<li><img src=”http://www.lovexpp.org/view/public/img/edit_cover.png” width=”100″></li>
<li style=”height:80px”>3</li>
<li style=”height:60px”>4</li>
<li><img src=”http://www.lovexpp.org/view/public/img/pre_view.png” width=”100″></li>
<li><img src=”http://www.lovexpp.org/view/public/img/edit_cover.png” width=”100″></li>
<li style=”height:80px”>8</li>
<li style=”height:90px”>9</li>
<li style=”height:30px”>10</li>
<li><img src=”http://www.lovexpp.org/view/public/img/pre_view.png” width=”100″></li>
<li><img src=”http://www.lovexpp.org/view/public/img/edit_cover.png” width=”100″></li>
<li><img src=”http://www.lovexpp.org/view/public/img/pre_view.png” width=”100″></li>
<li><img src=”http://www.lovexpp.org/view/public/img/edit_cover.png” width=”100″></li>
</ul>
</div>