jQuery練習-demo-isotope同位素網站

isotope這個網站做的東西我覺得很有趣
isotope是元素表吧?!
總之我覺得這個jquery還蠻不錯的，所以就來demo一下
好久沒有這麼熱血一整天弄個東西出來
繼上次以來已經好幾的月了


我先講一下isotope這個套件
其實我最喜歡的就是他這個過濾的功能 用元素表來表示過濾的功能真貼切
這樣的過濾功能能做的就是分類顯示甚麼東西 真的是很實用
isotope英文版的網站在此: http://isotope.metafizzy.co/index.html

isotope網站http://isotope.metafizzy.co/index.html

ps 雖然網站提供下載使用，並不提供商業用途。
後來我用這個範例提供的basic.html去改變我要的樣子
用班上的人員分組來做過濾的功能
最後在用fancybox的套件來做個人單頁點案後的資料顯示
真的是挺有趣的 呵呵xd
這訣竅就是慢慢用GOOGLE翻譯跟測測什麼id或class影響了什麼
以各種分類來說 
每個人員都是一個<div class="elmenent + 分類名稱">
若以木竹組來說則為  <div class="elmenent  wood">
wood必須事先在css中定義。


練習結果: http://yiying2.ueuo.com/isotope_practice/demos/basic.html
如果無法正確顯示請使用較新版的瀏覽器。

http://yiying2.ueuo.com/isotope_practice/demos/basic.html練習結果