jQueryを使ってレスポンシブなデザインを組む時の代表的なプラグインの紹介です。
一般的にはグリッドレイアウトなどと言われており、ブラウザの横幅によってdivなどの位置を一斉に整列させます。
本サイトでも採用しています。
画像の多いサイトなどでよく使われる傾向があります。
cssのシンプルなfloat:leftの左寄せとは違い、要素の入る余白があれば、上に積み込まれて配置されます。レンガやタイルのような配置です。
設定は簡単 masonry.pkgd.js をjQueryのあとに読み込み、以下のように要素にクラスを指定します。
<div class="grid">
<div class="grid-item">...</div>
<div class="grid-item">...</div>
...
</div>cssで要素の幅を指定します。
.grid-item { width: 200px; }JavaScriptには以下のように指定します。
$('.grid').masonry({
// options
itemSelector: '.grid-item',
columnWidth: 200
});gridクラスの子要素grid-itemクラスがついている要素だけレイアウトが適用されます。
itemSelectorやcolumnWidthといった属性は以下のようにいくつか種類があり、いろんなバリエーションを設定することができます。少しだけ
isAnimated:true,
//アニメーションの演出をする
isRTL:true,
//通常左上に寄るのを右上にする
isResizable:true
//ブラウザがリサイズしたら並び替えるなど、いろいろあるようですが、基本的にはほとんどカスタマイズする機会はなさそうです。他のオプションは下記のサイトをご確認ください。
ライブラリのダウンロード元はこちら
Mosonry
