MENU
CLOSE
SYSTEMWEBSITE Edit : 2020.06.30 Update : 2023.06.14

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

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

 

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

HTML

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

JS

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

Miki Kohinata

就活時代、企業で働きたくないがゆえに将来独立することを決めエンジニアの道へ。IT企業で藤本と運命的に出会いKOHIMOTO設立。目指すのは人の心に寄り添えるエンジニア。人生のテーマソングはWeekend by 5lack。