纯css3定高自适应瀑布流代码

纯css3自适应定高瀑布流,ie已经做了hack兼容到9，如果想pc和移动端都兼容推荐使用定高瀑布流插件flexImages.js最好用在手机端图片展示。

引入CSS

<link rel="stylesheet" href="css/style.css">

html代码

<div class="wrap">
	 <!-- 瀑布流 -->
  <ul class="gallery">
     <li class="item" style="background-image: url(img/www.umming.com_1.jpg);"><img src="img/www.umming.com_1.jpg" alt="图片标题"></li>
     <li class="item" style="background-image: url(img/www.umming.com_2.jpg);"><img src="img/www.umming.com_2.jpg" alt="图片标题"></li>
     <li class="item" style="background-image: url(img/www.umming.com_3.jpg);"><img src="img/www.umming.com_3.jpg" alt="图片标题"></li>
     <li class="item" style="background-image: url(img/www.umming.com_4.jpg);"><img src="img/www.umming.com_4.jpg" alt="图片标题"></li>
     <li class="item" style="background-image: url(img/www.umming.com_5.jpg);"><img src="img/www.umming.com_5.jpg" alt="图片标题"></li>
     <li class="item" style="background-image: url(img/www.umming.com_6.jpg);"><img src="img/www.umming.com_6.jpg" alt="图片标题"></li>
     <li class="item" style="background-image: url(img/www.umming.com_7.jpg);"><img src="img/www.umming.com_7.jpg" alt="图片标题"></li>
     <li class="item" style="background-image: url(img/www.umming.com_8.jpg);"><img src="img/www.umming.com_8.jpg" alt="图片标题"></li>
  </ul>
  <!-- 瀑布流结束 -->
</div>
<!-- 兼容低版本去浮动 -->
<div class="clear"></div>

预览地址：https://www.umming.com/demo/css_pbl/