![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfakOlUwFuxCucg6Dd8xuce0UZjKR8wGPhDzK8oo1WTJZzOFuxknLoVsVQCpz0mPR1MnaiiBb5KETNRQkGGG48huLlD53f1VF9bq96McEj1GnhCGduNOLWLGvrGlyLWpg14TqdLASZM4o/s1600/isotope000-1.jpg)
前陣子做了一個簡單的作品集網站,在挑版型時發現了一支滿有趣的前端程式:Isotope,作用就是可以將不同分類的作品篩選出來,點選"插畫"就只會出現插畫分類的作品這樣,挺方便的功能,想說之後案子或許會用到就研究了一下,做了個練習範例來玩^^
網址: http://isotope.metafizzy.co/
Isotope主要有三種功能,排版 Layout mode,篩選 Filtering,排序 Sorting,這邊用到的是篩選功能,想了解更多可以到他的網站看其他範例。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKTFGuUNLa1hc_qevGcbywIEBXi0cmCC5ZsTRuMY-YAL_lmV9IrdyPNE8WG-KggYkV0bJwMIF0n1owK2lFJ9FHm1kQ0-BRCqgL3cjf-aluzKpH1mgtfbabl5Z8esq-o6BiWQzaJXUO_sY/s1600/isotope002.jpg)
我用了海賊王手遊的角色圖鑑,只要點選上面的按鈕就會篩選出對應的角色,把將其他角色隱藏起來,就像下圖這樣 ↓
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8xQw4oypYsmWpyABpCFSt6O_aA-_wlGi5Mu27x-yt2_LcjOhTvtyXN8yyic_dkbA1lQlrjHCc6gjyvISB4YYYW_OeL9kSFRCNQkTDNPggsqXvcT8COZKixBwCwwpkzYBA5J_QDpTZIi0/s1600/isotope002-1.jpg)
是不是挺酷的!馬上就看看怎麼做的吧。
先在網頁中加入jQuery和Isotope程式,可以去上面貼的網站抓下來,或是使用他提供的CDN連結。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM_sXLe1104jD4YOPgaQQRHRduFYJpbXQYX15JYmq1-MgeTJya_jQsPnvorePoQVSv7JfIrcei8bezRqO3mt5e0LavsCN00YFOos5TB7rCWNFwhNvZgg1kWBASt2FPKCe85WdcjMKEw00/s1600/isotope005.jpg)
HTML基本架構如下:
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzvMMkRuCMK_8ie-OPahsSqdi-zlg6luTcv1QLCu63jDAP2gOJghOXB7-mDA9sunh9uAbwRLmrgH-gSRAcsOw0VaV_0ANecfLzku_zxDeLVPpwhKeZyb464yzQvm4GSSajnTtkOrTF9lA/s1600/isotope003.jpg)
按鈕button使用data-filter=""來對應角色class=""中的內容。
再用DIV class="filters"把按鈕包起來,button-group是拿來做點選後替換按鈕CSS用,角色圖則是放在grid中。
JS語法的部分:
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2kqiF5BJgc4xtnusVzqN14TR4kfqLlGpfJegD5eTM1lzZ6Xc5LjkTo2nuL72OKnSkM7m2PrHFqYXSgSAiPS0ktct25QZTQ_vDTmjiX1Qy2pI_jYMhALAQGn9jFiHkrAwBG_0Ckk9BloQ/s1600/isotope004.jpg)
最後設定調整CSS就完成拉!
參考資料:http://isotope.metafizzy.co/filtering.html
http://codepen.io/desandro/pen/JEojz
0 意見