Home » jQuery 外掛

[jQ]jQuery Wookmark 0.5

[ 日期： | 瀏覽：11,415 | 迴響：16 ]
範例 1
請協助我把這個效果加到我的網站 (只要 2,000 元)
沒錯!只要 2,000 元就能獲得我們團隊完整的協助，讓效果能迅速的整合到您的網站，並保證瀏覽器的相容性。
立刻申請!



jQuery Wookmark 是一個用來自動幫指定項目排列成格子狀的套件。一開始主要是 wookmark.com 網站自己使用的效果，但很多網友詢問該效果，所以它們就把弄成外掛供大家使用囉。

套件名稱：jQuery Wookmark
套件版本：0.5
作者網站：http://www.wookmark.com/jquery-plugin
套件網址：N/A
發佈日期：2012-03-19
檔案大小：4.95 KB
檔案下載：jquery.wookmark.js

參數選項說明：

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

container(選填)
描述： 用來放置項目的外層容器, 主要會影響到寬度
預設值： $('body')
 
offset(選填)
描述： 每一個項目間的邊距
預設值： 2
 
autoResize(選填)
描述： 當瀏覽器寬度改變時是否自動再重新排列
預設值： false
 
itemWidth(選填)
描述： 單一項目的寬度, 預設會自動依第一個為主
預設值： $(this[0]).outerWidth()
 
resizeDelay(選填)
描述： 自動重新排列的延遲時間(1000毫秒 = 1秒)
預設值： 50

方法說明：

檢視原始碼 JavaScript
1
2

// 產生自動排列效果
$(selector).wookmark(options);

使用範例：

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.wookmark.js"></script>
<style type="text/css">
#tiles {
	list-style-type: none;
	position: relative;
	margin: 0;
}
#tiles li {
	width: 200px;
	background-color: #ffffff;
	border: 1px solid #dedede;
	cursor: pointer;
	padding: 4px;
}
#tiles li img {
	display: block;
}
#tiles li p {
	color: #666;
	font-size: 12px;
	margin: 7px 0 0 7px;
}
</style>
<script type="text/javascript">
	$(function(){
		// 產生自動排列的格子效果
		// 每一個項目間的邊距為 5px
		// 當網頁寬度改變時再重新排列
		$('#tiles li').wookmark({
			autoResize: true, 
			offset: 5
		});
	});
</script>
 
<body>
	<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>
		<li><img src="images/image_4.jpg" width="200" height="158"><p>14</p></li>
		<li><img src="images/image_5.jpg" width="200" height="300"><p>15</p></li>
		<li><img src="images/image_6.jpg" width="200" height="297"><p>16</p></li>
		<li><img src="images/image_7.jpg" width="200" height="200"><p>17</p></li>
		<li><img src="images/image_8.jpg" width="200" height="200"><p>18</p></li>
		<li><img src="images/image_9.jpg" width="200" height="398"><p>19</p></li>
		<li><img src="images/image_10.jpg" width="200" height="267"><p>20</p></li>
		<li><img src="images/image_1.jpg" width="200" height="283"><p>21</p></li>
		<li><img src="images/image_2.jpg" width="200" height="300"><p>22</p></li>
		<li><img src="images/image_3.jpg" width="200" height="252"><p>23</p></li>
		<li><img src="images/image_4.jpg" width="200" height="158"><p>24</p></li>
		<li><img src="images/image_5.jpg" width="200" height="300"><p>25</p></li>
		<li><img src="images/image_6.jpg" width="200" height="297"><p>26</p></li>
		<li><img src="images/image_7.jpg" width="200" height="200"><p>27</p></li>
		<li><img src="images/image_8.jpg" width="200" height="200"><p>28</p></li>
		<li><img src="images/image_9.jpg" width="200" height="398"><p>29</p></li>
		<li><img src="images/image_10.jpg" width="200" height="267"><p>30</p></li>
	</ul>
</body>
範例 1

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定

備註：
目前該外掛最後並沒有把 this 回傳出來，所以當使用到 wookmark() 後就不能繼續接其它方法囉。

16 筆針對 [jQ]jQuery Wookmark 0.5 的迴響

  1. 謝謝男丁老師^^
    順帶請教一下wookmark.com他的相片牆網頁拉到最底下
    才會繼續讀取其他的相片出來
    這個效果用jQuery有辦法展現出來嗎
    還是一定要使用AJAX呢??

  4. 男丁老師

    我是網頁設計公司，但我們公司都是視覺設計師，
    目前有有想要找js的工程師合作或是一起上班，
    不知道老師是否有提供相關的仲介...

  6. 通告： wookmark 的圖片會重疊! | Victor Gau

發表迴響