グリッドレイアウトを実現する有名プラグイン Masonry の使い方

Masonry
グリッドレイアウトを実現するのによく使われる、言わずと知れた有名プラグイン「Masonry」の使い方を書き留めておこうと思います。今更僕が書かなくっても、たくさん参考になるページがありますが、自分用の覚え書きということで…。

必要なもの

公式から必要なものをダウンロードしてきます。必須なのはmasonry.pkgd.min.jsだけですね。

<script src="js/masonry.pkgd.min.js"></script>

htmlとcssのセッティング

まずグリッドにしたい部分のhtmlの記述から。公式に則ってここではグリッドにするエリアのidは”container”にしていますが、ここは任意で書き換えて構いません。そしてグリッドされる要素はどのタグでも問題ないようです。後ほど記述するオプションで、エリア内でグリッドにする要素、しない要素を分けることも出来ます。

<div id="container"><!--任意のidで大丈夫です-->
  <div class="item wide">要素１</div>
  <div class="item">要素２</div>
  <div class="item">要素３</div>
</div>

次はcssの記述です。こちらはclassごとに要素の幅を設定するものです。要素が整列したときに、エリアに対してどれくらいの大きさの要素にするか設定します。もちろんpxでも指定は出来ます。

.item { width: 25%; }
.item .wide { width: 50%; }

JavaScriptのセッティング

グリッドレイアウトにするエリアを指定すればMasonryは動きます。.querySelectorで要素を指定して、あとは必要なオプションを取捨選択していきます。

var container = document.querySelector('#container');
var msnry = new Masonry( container, {
  // options
  columnWidth: 200, //要素のサイズを指定。classとか入れるとcssで設定した幅に出来ます。
  itemSelector: '.item' //並べる要素を指定するオプション。
});

他にもオプションが豊富ですが、その辺は公式を読んでいただければと…。
ちなみに、MansonryはjQueryが必要ないプラグインですが要素の指定は下記のようにjQueryでももちろん出来ますよー

$('#container').masonry({
  itemSelector: '.item',
  columnWidth: 200
});

基本的な使い方は以上です。ちなみにMasonryというのは「れんが工」って意味なんですね。