尤明明Blog

网站建设外包|网站切图外包,技术不仅是一种专业,更是一种责任!

您的当前位置: 首页 » 前端学习 » css3+html5 »

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

2019-11-11   Umming   css3+html5    评论(0)    浏览(1669)


311450271341.png

纯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/

纯css3自适应定高瀑布流.zip 大小:614.41 KB  |  来源:本站下载

标签: css3特效

本文链接:https://www.umming.com/css3_html5/133.html     百度已收录

声明:本站信息由网友自行发布或来源于网络,真实性、合法性由发布人负责,请仔细甄别!本站只为传递信息,我们不做任何双方证明,也不承担任何法律责任。文章内容若侵犯你的权益,请联系本站删除!


发表评论: