MENU
CLOSE
PICK UPSYSTEMWEBSITE Edit : 2020.06.30 Update : 2023.01.23

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

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

 

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

HTML

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

JS

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

Web Trends Lab.編集部

KOHIMOTO Inc.所属。トレンドやノウハウ中心にWebサイトを作るための知見を現場から発信していきます👀また、制作したWebサイトでの活用法や、最前線での施策を伺う企業へのインタビューも実施予定。