グラフィック」TweetIsotopeは、要素をMasonry風のグリッドレイアウトに並べ替えてくれるjQueryプラグインです。フィルタリング機能も使えます。フィルタリング機能の挙動や各種オプションの使い方については、公式サイトでご確認いただけます。IsotopeとjQuery本体の読み込みまずは、IsotopeとjQuery本体を読み込みます。IsotopeはCDN経由で提供されているため、以下のコードを追加することでスクリプトを読み込めます。src="//unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>GitHubからファイルをダウンロードして、「dist/isotope.pkgd.min.js」を自サーバーに設置してもOKです。HTMLのマークアップHTMLでは、以下のように親要素と各アイテムにそれぞれクラスを指定します。以下のスクリプトを追加して、Isotopeを実行します。});});</script>これで、各アイテムをMasonry風のグリッドレイアウトに並べ替えてくれます。フィルタリング機能付きのグリッドレイアウトを実装する方法Isotopeでフィルタリング機能を実装する場合、HTMLは以下のようにします。filter5">アイテム5</li></ul>.filterの方は、アイテムをフィルタリングするためのリンクです。絞り込みたいクラス名をdata-filter属性に指定し、アイテム側ではクラスを指定してあげます。スクリプトは以下のようにします。false;});</script>.filter内のリンクをクリックすると、data-filter属性で指定されているクラスを持っているアイテムのみにフィルタリングされます。リンク側には.activeクラスが追加されますので、CSSでスタイルを適用して、どのアイテムが表示されているかわかるようにしましょう。商用利用する場合は、商用ライセンスの購入が必要なのでご注意ください。詳しくは、ライセンスページをご参照ください。あとがきグリッドレイアウトに並び替えるだけならMasonryとかMuuriなどありますが、フィルタリング機能まで付いているのはめずらしいですね。他にもソート機能を実装したり、レイアウトを細かく調整することもできるようです。詳しくは公式サイトをご参照いただければと思います。コメントをキャンセルメールアドレスが公開されることはありません。