ブロックを隙間なく整列してくれる「Masonry」の使い方

それでは、横幅や高さの異なる複数のボックスを、できるだけ無駄な空間が出ないように隙間を詰めて自動配置してくれるスクリプト「Masonry」の使い方をご紹介致します。以下の3ステップだけ(最後の4はオプション)で使えます。

1. スクリプトをダウンロードして、自サイトにそのままアップロード 《改変不要》
2. HTMLに、「Masonry」を呼び出す記述を追加 《1行だけ》
3. 隙間なく整列させたいボックスを作るHTMLにclass名を付加 《必須なのは1つだけ》
4. 必要に応じてオプションを記述 《省略可》

1から順番に操作・記述してみて下さい。最後にサンプルページも用意しています。

1. スクリプトをダウンロードして、自サイトにそのままアップロード

右上の「Download masonry.pkgd.min.js」リンクからダウンロード

配布ページ右上の「Download masonry.pkgd.min.js」リンクからスクリプト本体をダウンロード

まずは、「Masonry」のスクリプト本体をダウンロードしましょう。「Masonry」の配布サイトへアクセスして、右図のように「Download masonry.pkgd.min.js」と書かれた赤紫色部分をクリックすると、スクリプトをダウンロードできます。

リンクを直接クリックすると、JavaScriptソースがそのまま表示されてしまいますので、右クリックして「名前を付けてリンク先を保存」等の機能を使って保存して下さい。

ダウンロードしたファイルは、自サイト内の適当な場所にアップロードして下さい。


 

2. HTMLに、「Masonry」を呼び出す記述を追加

自動で隙間なく配置させたいボックスのあるHTMLに、「Masonry」を呼び出す記述を加えます。このとき、読み込む必要のあるスクリプトは「Masonry」1つだけです。例えば、以下のようにHTMLのhead要素内に記述します。
<script src="masonry.pkgd.min.js"></script>
実際にアップロードした場所に合わせて修正して下さい。

※仕様が変わり、jQueryは不要になりました
当初のバージョンでは、「Masonry」を使うためには「jQuery」の併用が必須でした。しかし、現在では「jQuery」は不要になっており、「Masonry」単独で動作します。初期化用のスクリプトをHTML内に書いておく必要もなくなり、全体的に必要な記述量は少なくなりました。現在の「Masonry」も(従来のように)jQueryプラグインとして使うことも可能ですが、本記事では「Masonry」を単独で使用する記述方法を解説しています。

3. 隙間なく整列させたいボックスを作るHTMLにclass名を付加

最後に、HTMLを記述します。「Masonry」を使うために追記する必要があるのは、以下の2種類のclass名です。
  • 自動で隙間なく再配置したいボックス→「class="item"」を付加。《任意》
  • それらのボックスを囲む外側のボックス→「class="js-masonry"」を付加。《必須》
自動整列の対象である「アイテム」(複数)と、それらを囲む「コンテナ」(1つ)の計2種類を、class名を使って指定するだけです。例えば、以下のように記述します。ここではすべてにdiv要素を使っていますが、他の要素を使っても構いません。
<div class="js-masonry">
   <div class="item">~</div>
   <div class="item">~</div>
   <div class="item">~</div>
</div>
※内側に含める要素(「class="item"」を付加した要素)はいくつあっても構いません。

記述が必須なのは「class="js-masonry"」のみ
外側の要素(コンテナ)に加える「class="js-masonry"」の記述は必須です。しかし、内側の(自動整列対象の)要素に加える「class="item"」の記述は省略可能です。しかし、記述しておくことが推奨されているため、ここでは省略せずに記述しています。

以上が、「Masonry」の設置方法と基本的な使い方です。たったこれだけで、ウインドウサイズに合わせて複数のブロックを自動的に(できるだけ)隙間なく詰めて表示してくれるようになります。

「Masonry」を使ったサンプルページ (オプション指定なし版)

Masonryを使って自動整列

Masonryを使って自動整列

上記に掲載したソースを使って「Masonry」で自動整列させたサンプルページを用意しています。動作確認やソースのコピーなどのためにご参照下さい。このサンプルページでは、ウインドウの横幅を変化させた際に、アニメーション効果と共に複数の「キャプション付き写真」が自動的に再配置されます。

Masonryでの自動整列サンプル1

※上記のサンプルページでは、指定しておくことが推奨されているオプション項目も含めて、一切のオプションを記述していません。そのため、読み込み直後の整列がうまくいかない場合があります(サンプルページ末尾の注釈や、次のページをご参照下さい)。


 
さて、「Masonry」には、自動整列の方法に関する様々なオプションが用意されています。また、記述が推奨されているオプションも2項目だけあります。最後に、「Masonry」のオプション記述方法をご紹介致します