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

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

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

isotope網站

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

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

isotope-DEMO

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

isotope-DEMO

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

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

載入Isotope程式

HTML基本架構如下:

基本架構

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

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

JS語法的部分:

JS程式

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

[範例連結] [下載]

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

Leave a reply:

Your email address will not be published.

Site Footer

Sliding Sidebar

About Me

About Me

歡迎來到我的部落格,我是堅果、史提夫,一個平面、網頁設計師,這裡就是生活記錄和分享,各種拉哩拉雜心得...等等,了解更多請到「初訪看此」謝謝 :)

Social Profiles

Facebook Page