Wednesday, September 7, 2016

Search and Filter items in grid layout with isotop javascript library

I want to create a portfolio page that listing all of my projects with search and filter functionalities. I search through a lot of javascript libraries and isotope is the only one that I can make it to work (I tried Filterizr, it worked, but if the number of items is about 100, everything will be broken):

Isotope official page: http://isotope.metafizzy.co/

This is a working example. It's easy, just read through the code and you will understand:





Isotope - filtering with search field and button filters






Mercury

Hg
80
200.59

Tellurium

Te
52
127.6

Bismuth

Bi
83
208.980

Lead

Pb
82
207.2

Gold

Au
79
196.967

Potassium

K
19
39.0983

Sodium

Na
11
22.99

Cadmium

Cd
48
112.411

Calcium

Ca
20
40.078

Rhenium

Re
75
186.207

Thallium

Tl
81
204.383

Antimony

Sb
51
121.76

Cobalt

Co
27
58.933

Ytterbium

Yb
70
173.054

Argon

Ar
18
39.948

Nitrogen

N
7
14.007

Uranium

U
92
238.029

Plutonium

Pu
94
(244)





The code's below: