您的位置：首页 > 其它

web之瀑布流布局

2016-06-19 21:47 183 查看
组件分享：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>

<!--css-->

<style>
/* * 父容器需要设置相对定位 * 项目需要设置隐藏 */

#list{position:relative;}

#list li{list-style:none;}

</style>

<!--js-->

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航