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> |
備註:
目前該外掛最後並沒有把 this 回傳出來,所以當使用到 wookmark() 後就不能繼續接其它方法囉。
謝謝男丁老師^^
順帶請教一下wookmark.com他的相片牆網頁拉到最底下
才會繼續讀取其他的相片出來
這個效果用jQuery有辦法展現出來嗎
還是一定要使用AJAX呢??
該網站的效果是用 Ajax 做的, 建議到 https://github.com/GBKS/Wookmark-jQuery 下載它的範例
其中就有一個是像這樣無止盡載入的範例了
謝謝男丁老師
我去嘗試看看^^
這個跟jQuery masonry感覺功能相當類似,有甚麼明顯的不同嗎?
基本效果是差不多, 不過 Masonry 能設定及功能較齊全。
男丁老師
我是網頁設計公司,但我們公司都是視覺設計師,
目前有有想要找js的工程師合作或是一起上班,
不知道老師是否有提供相關的仲介...
若有問題可以來信或是直接留言討論, 不然我也只能幫你放個徵人的連結..ˊ_>ˋ
請問男丁老師您的聯絡email是?
就是網址加gmail.com(含.tw)
請問是這樣嗎?好像寄不出去
abgne.tw@gmal.com
是 gmail 啊XD
老師你好 像這種效果是等寬,那假如想要等高
例如:http://www.7headlines.com/
也可以用這隻程式改嗎?
那是改哪個屬性呢
謝謝老師解惑
這外掛目前沒有提供等高的設定哩!
嗯嗯
http://isotope.metafizzy.co/
我找到這個可以用^__^
這外掛也是很實用..
通告: wookmark 的圖片會重疊! | Victor Gau