【超簡単】Masonryの使い方と最低限の実装方法

写真を縦横比を維持したままタイル状に綺麗に並べるためのライブラリー「Mosonry」の必要最低限の実装方法です。

CSSで正方形にトリミングして並べる方法は一般的ですが、トリミングせずに並べる必要があったので、調べてみました。

検索して出てきた解説サイトの通りにやってもうまく行かなかったり、オプションなど複雑な内容で難しかったので、公式サイトを参考にして、できるだけ最小限の実装をしてみました。

masonry

Masonryの使い方

こちらのライブラリは、ダウンロードしても使えますが、CDNも対応しているので、今回はこちらで読み込みます。組み方によっては単体でも使えるようですが、もう一つ「imagesloaded」というライブラリと併用すると良いようです。

「Masonry」公式サイト
https://masonry.desandro.com/

「imagesloaded」公式サイト
https://imagesloaded.desandro.com/

ダウンロードする場合は、上記から。
ダウンロードしなくても以下のように書けばOKです。

HTML

「jQuery」と「Masonry」と「imagesloaded」の3つのライブラリを読み込み、以下のようにHTMLを組みます。

grid-sizergutter-sizerは幅を取得するための空の要素です。

JavaScript

以下のように「Masonry」と「imagesloaded」を呼び出します。同時にオプションを設定できます。
写真と写真の間の幅を指定するには、gutterを指定します。

CSS

縦に3列並ぶスタイルシートです。レスポンシブにするため、幅を%指定しています。本当なら33.3%になるはずですが、写真と写真の隙間の幅の関係で、若干遊びを設けないとズレるようです。32%で調整してみました。

おまけで、モバイル幅の時は2列に並ぶように設定しています。

まとめ

世の中には便利なライブラリがたくさんありますね。オプションなどの設定で、さらにカスタマイズできるようになっているようです。上記の並び方では不満な方はぜひ、公式サイトでカスタマイズ方法を調べてみてください。

「Masonry」公式サイト(オプション)
https://masonry.desandro.com/options.html