前陣子做了一個簡單的作品集網站，在挑版型時發現了一支滿有趣的前端程式：Isotope，作用就是可以將不同分類的作品篩選出來，點選"插畫"就只會出現插畫分類的作品這樣，挺方便的功能，想說之後案子或許會用到就研究了一下，做了個練習範例來玩^^


網址: http://isotope.metafizzy.co/

Isotope主要有三種功能，排版 Layout mode，篩選 Filtering，排序 Sorting，這邊用到的是篩選功能，想了解更多可以到他的網站看其他範例。



我用了海賊王手遊的角色圖鑑，只要點選上面的按鈕就會篩選出對應的角色，把將其他角色隱藏起來，就像下圖這樣 ↓


是不是挺酷的！馬上就看看怎麼做的吧。

先在網頁中加入jQuery和Isotope程式，可以去上面貼的網站抓下來，或是使用他提供的CDN連結。



HTML基本架構如下：



按鈕button使用data-filter=""來對應角色class=""中的內容。

再用DIV class="filters"把按鈕包起來，button-group是拿來做點選後替換按鈕CSS用，角色圖則是放在grid中。

JS語法的部分：



最後設定調整CSS就完成拉！

參考資料：http://isotope.metafizzy.co/filtering.html
http://codepen.io/desandro/pen/JEojz