可変グリッドプラグインjQuery masonryの設定方法・オプションまとめ

高さが違う要素をウィンドウサイズにフィットさせたり、アニメーションさせて並び変えたり、写真やイラストなどのギャラリーページに使えるjQueryプラグイン「Masonry」の使い方やオプションについてまとめました。

基本導入方法

Masonryを導入するには、jQueryとMasonry本体を読み込みます。以下のようにコンテナを指定して実行します。

主なオプション

• columnWidth: グリッドの幅を指定。
• itemSelector: 並び替える要素のクラス名を指定。
• isAnimated: アニメーションの有効・無効。
• gutterWidth: 要素間の余白を指定。

参考記事: はてブなどでシェアをお願いします。