使用Isotope篩選功能做作品集網站


前陣子做了一個簡單的作品集網站,在挑版型時發現了一支滿有趣的前端程式: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

留言