简单实现兼容IE6的纯div+css瀑布流效果

先看效果：

代码很简单：

CSS代码：

div.wrap{width:1300px; overflow:hidden; _zoom:1; margin:0 auto;}
ul,li{margin:0; padding:0; list-style:none;}
ul{float:left; display:inline; width:225px;}
ul li{padding:5px; background:#eee; margin:8px; box-shadow:0px 3px 3px #333;}
p{text-align:center;}

Html代码：

<div class="wrap">
    <ul>
    	<li><img src="images/1.jpg" /><p>汽车网</p></li>
    	<li><img src="images/2.jpg" /><p>汽车网</p></li>
    	<li><img src="images/3.jpg" /><p>汽车网</p></li>
    	<li><img src="images/4.jpg" /><p>汽车网</p></li>
    	<li><img src="images/5.jpg" /><p>汽车网</p></li>
    	<li><img src="images/6.jpg" /><p>汽车网</p></li>
    	<li><img src="images/23.jpg" /><p>汽车网</p></li>
    	<li><img src="images/24.jpg" /><p>汽车网</p></li>
    </ul>
    <ul>
    	<li><img src="images/7.jpg" /><p>汽车网</p></li>
    	<li><img src="images/8.jpg" /><p>汽车网</p></li>
    	<li><img src="images/9.jpg" /><p>汽车网</p></li>
    	<li><img src="images/10.jpg" /><p>汽车网</p></li>
    	<li><img src="images/11.jpg" /><p>汽车网</p></li>
    	<li><img src="images/12.jpg" /><p>汽车网</p></li>
    </ul>
    <ul>
    	<li><img src="images/13.jpg" /><p>汽车网</p></li>
    	<li><img src="images/14.jpg" /><p>汽车网</p></li>
    	<li><img src="images/15.jpg" /><p>汽车网</p></li>
    	<li><img src="images/16.jpg" /><p>汽车网</p></li>
    	<li><img src="images/17.jpg" /><p>汽车网</p></li>
    	<li><img src="images/18.jpg" /><p>汽车网</p></li>
    </ul>
    <ul>
    	<li><img src="images/19.jpg" /><p>汽车网</p></li>
    	<li><img src="images/20.jpg" /><p>汽车网</p></li>
    	<li><img src="images/21.jpg" /><p>汽车网</p></li>
    	<li><img src="images/22.jpg" /><p>汽车网</p></li>
    </ul>
    <ul>
    	<li><img src="images/25.jpg" /><p>汽车网</p></li>
    	<li><img src="images/26.jpg" /><p>汽车网</p></li>
    	<li><img src="images/27.jpg" /><p>汽车网</p></li>
    	<li><img src="images/28.jpg" /><p>汽车网</p></li>
    	<li><img src="images/29.jpg" /><p>汽车网</p></li>
    </ul>
</div>

浅析：我爱模版一共用了四个ul，每个ul都给了float:left;的样式，并且固定了宽度，给左右边距。li没有给高度，宽度和ul一样。四个ul外面套个大的div，总体居中，并且给了“overflow:hidden; _zoom:1;”的属性，防止浮动塌陷。就这么简单。如果想完善下，可以给图片和li一样的宽度，但不给高度，这样便可以实现等比例缩放而不会变形。

更多瀑布流布局实现方法请访问：瀑布流布局实现方法总结

本站推荐瀑布流插件：带喜欢和顶踩和返回顶部按钮的可以无线加载的jquery瀑布流