Wookmark-一个jQuery瀑布流插件

什么是瀑布流就不细说了,瀑布流在图片集里被应用个很广泛,Wookmark这个插件也是比较流行的插件。

 

shdfjshf3475352

 

DEMO    download

使用说明

1.引入jQuery和wookmark

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.wookmark.com/js/jquery.wookmark.min.js"></script>

2.HTML代码

<style>#tiles{position:relative}</style>
<ul id="tiles">
	<li><img src="images/image_1.jpg" width="200" height="283"><p>1</p></li>
	<li><img src="images/image_2.jpg" width="200" height="300"><p>2</p></li>
	<li><img src="images/image_3.jpg" width="200" height="252"><p>3</p></li>
	<li><img src="images/image_4.jpg" width="200" height="158"><p>4</p></li>
	<li><img src="images/image_5.jpg" width="200" height="300"><p>5</p></li>
	<li><img src="images/image_6.jpg" width="200" height="297"><p>6</p></li>
	<li><img src="images/image_7.jpg" width="200" height="200"><p>7</p></li>
	<li><img src="images/image_8.jpg" width="200" height="200"><p>8</p></li>
	<li><img src="images/image_9.jpg" width="200" height="398"><p>9</p></li>
	<li><img src="images/image_10.jpg" width="200" height="267"><p>10</p></li>
	<li><img src="images/image_1.jpg" width="200" height="283"><p>11</p></li>
	<li><img src="images/image_2.jpg" width="200" height="300"><p>12</p></li>
	<li><img src="images/image_3.jpg" width="200" height="252"><p>13</p></li>
</ul>

3.应用wookmark

$(document).ready(new function() {
	$('#tiles li').wookmark({
		autoResize: true, // 当浏览器大小改变时是否自动调整
		container: $('#tiles'), // 父容器,这个要注意的一点是该容器需要有 position: relative 属性。
		offset: 2, // 每个元素之间的距离  
		itemWidth: 210 // 每个元素的宽度,瀑布流高度是不限制的,所以只要宽度固定就可以了 
	});
});