组件分享: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>