Isotopeを使ってグリッドレイアウト&ソート機能をつける

動的な要素にグリッドレイアウトをさせたいとき、普段Masonryをよく使っていましたが、簡単にフィルター機能を実装できるとのことで今回はIsotopeを使ってみました。


 

ヘッダーでjqueryとプラグインを読み込み

HTML

*レイアウトさせる要素に指定しているclassをボタン箇所のdata-filterに指定
*すべての場合はdata-filterに”*”を指定

JS

これだけで、フィルター機能まで実装できました。あとは、cssで見栄えを整えれば完成です。