Masonry を使ってみる

Masonry

Masonry は Pintest のように、ウィンドウ幅内に収まるように各要素をうまいこと並べてくれるライブラリです。

話題になったのはちょっと前ですが、最近ちょっと使う機会があったので使い方をメモしておきます。

ダウンロードは下記から

http://masonry.desandro.com/

今回は v3.1.1 を利用しています。

使い方

先ほどダウンロードしてきたライブラリを head 内で読み込んでおきます。
ライブラリ読み込んだ後に下記のコードを書きます。

var container = document.getElementById('container’); //  各要素を包括する要素
    var msnry = new Masonry(container, {
    itemSelector: '.item' // ここで指定した要素がレイアウトされる対象になる
});

new Masonry で Masonry のインスタンスを作成します。
第一引数に要素を包括するコンテナとなる要素を指定します。

第二引数はオブジェクトをオプションの値として渡します。
今回は itemSelector に item クラスを指定しました。

ここで選んだセレクターが Masonry によってレイアウトを変更される対象になります。

以下のようなイメージ。

試しにやってみます。

See the Pen wCsIi by turusuke (@turusuke) on CodePen

最初の画面上では item が崩れてしまっていますが、layout と書かれたボタンを押すと Masonry のインスタンスが作成されて灰色の枠の中にきっちりと収まるようにレイアウトされます。

細かい調整はオプションやCSSでレイアウトしていけばよさそうです。

オプション一覧

先ほどのコードを使って、今度はコンテナの幅を 70% にして、高さの違う要素をたくさん並べてみます。

See the Pen ircag by turusuke (@turusuke) on CodePen

ウィンドウの幅を縮めてみれば確認できると思うのですが、コンテナの幅に合わせて中の要素もきれいに並ぶように移動します。

デザイン → Masonry

単にデータを取得してきて、とりあえず写真をずらーっと並べるようなコンテンツでは問題にならないと思うのですが、デザインがあってそれをもとにコーディングしていくとなると少し問題がでてきます。

部分的にレイアウトを壊したくない箇所がある

例えばここの要素とここの要素はセットになっていて、
切り離すことが出来ないので動くときもセットで動いてほしいといった以下のような場合。

入れ子で書いておいてあげればオッケーです。
例えば先ほどのコードでいうとオプションの itemSelector で指定した .item の中にまとめて書いておいてあげれば一緒に移動します。

並べる順番を意識して思い通りの並びにする

Masonry はデフォルでは左上から右下へ向かって要素を並べていきます。
itemSelector オプションで要素を指定されていればその要素をコードの上から書いてあるものから順に左から右に敷き詰めていきます。

これを意識していれば組みやすいのでは無いかと思います。

この並べる順番はオプションを変更することで変更することができます。

右から左下の順が良ければ isOriginLeft を false に、左下から右上へ積み重ねるようなレイアウトにしたければ isOrignTop を false に指定します。詳しくはドキュメントを見たほうが分かりやすいと思います。 http://masonry.desandro.com/options.html#isoriginleft

古い IE でもせめて表示はさせたい

Masonry は IE8 以上をサポートしています。
なのでそれより下は動きません。

とりあえずレイアウトの可変が無くてもいいのであれば、
Masonry で並べられたレイアウトを参考に IE 用に Position を地道に変更していきましょう。

どうしても動きが欲しいという場合は http://blog.xlune.com/2009/09/jqueryvgrid.htmlという国産の jQuery プラグインを利用してみるのも手かもしれません。