Masonry
jQueryプラグインMasonryを用いたタイルレイアウトについて紹介します。大きさの異なる複数のブロックが、タイル状に自動整列されます。ウィンドウサイズが変更されると、アニメーションしながらレイアウトを変更します。
HTML
基本形式
<div class="grid"> <div class="grid-item">...</div> <div class="grid-item grid-item--width2">...</div> <div class="grid-item">...</div> ... </div>
- CDNのコードを取得、あるいは、ダウンロードして、あなたの HTML の HEAD で登録します。
- CDNの場合
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
- パッケージをローカルに置く場合
<script src="/path/to/masonry.pkgd.min.js"></script>
- CDNの場合
- コンテナエリアのクラス名を grid としています。
- 個々のアイテムのクラス名を ''grid-item" としています。
CSS
基本形式
.grid-item { width: 200px; } .grid-item--width2 { width: 420px; }
- 2倍、3倍幅のクラスを定義することも可能です。その場合
2倍幅のwidth = itemのwidth + 余白 + itemのwidth
とするとよいでしょう。 - このとき 余白 = columnWidth - itemのwidth です。
JavaScript
基本形式
$('.grid').masonry({ // options itemSelector: '.grid-item', columnWidth: 200 });
- すべての画像を読み込んだ後で、処理が動くよう以下の記述をしています。
$(window).on("load",function(){
- コンテナエリア(grid)に対して以下の形式で、オプションを記述します。
$('.grid').masonry({ オプション・・・ });
- 最低限必要なオプション記述は以下の2つです。
columnWidth: 240, ←アイテムが占有する幅(px)を記述します。 itemSelector: '.grid-item', ← アイテムのクラス名を記述します。