web之瀑布流布局

来源：互联网发布：扩展欧几里得算法公式编辑：程序博客网时间：2024/04/28 04:04

组件分享：http://pan.baidu.com/s/1eShoNx4

参考网站：http://www.wookmark.com/about/api

瀑布流布局非常适合大量图片的展示，一改过去裁剪图片尺寸统一的排版，每张图片都能完全展示，并错落有致，让人眼前一亮。

注意事项： 项目中的 img 元素的 width 和 height 属性需要写，否则定位会不准确。（可以用 JavaScript 实时获取图片的宽高，但图片数量过多时，这将是一件不靠谱的事情，如果你执意要这么做，可以参考这个Demo） Demo: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>瀑布布局</title>  <style> /* * 父容器需要设置相对定位 * 项目需要设置隐藏 */ #list{position:relative;} #list li{list-style:none;} </style>  <script src="js/jquery-1.12.0.min.js"></script> <script src="js/jquery.wookmark.js"></script> <script> $(function(){ //$('#list li').wookmark(); $('#list li').wookmark({ container: $('#list'), offset: 10, itemWidth: 200, flexibleWidth:100 }); //$('#list').trigger('refreshWookmark'); }); </script> </head> <body> <ul id="list"> <li><img src="images/image_1.jpg" width="200" height="283"><p>text</p></li> <li><img src="images/image_2.jpg" width="200" height="300"><p>text</p></li> <li><img src="images/image_3.jpg" width="200" height="252"><p>text</p></li> <li><img src="images/image_4.jpg" width="200" height="292"><p>text</p></li> <li><img src="images/image_5.jpg" width="200" height="202"><p>text</p></li> <li><img src="images/image_6.jpg" width="200" height="352"><p>text</p></li> <li><img src="images/image_1.jpg" width="200" height="283"><p>text</p></li> <li><img src="images/image_2.jpg" width="200" height="300"><p>text</p></li> <li><img src="images/image_3.jpg" width="200" height="252"><p>text</p></li> <li><img src="images/image_4.jpg" width="200" height="292"><p>text</p></li> <li><img src="images/image_5.jpg" width="200" height="202"><p>text</p></li> <li><img src="images/image_6.jpg" width="200" height="352"><p>text</p></li> <li><img src="images/image_2.jpg" width="200" height="300"><p>text</p></li> <li><img src="images/image_3.jpg" width="200" height="252"><p>text</p></li> <li><img src="images/image_4.jpg" width="200" height="292"><p>text</p></li> <li><img src="images/image_5.jpg" width="200" height="202"><p>text</p></li> <li><img src="images/image_6.jpg" width="200" height="352"><p>text</p></li> </ul> </body> </html>

0 0