Masonry.jsを使ってみる

レスポンシブ対応のグリッドレイアウトを実装できるjQueryのプラグイン「Masonry.js」の使い方をメモ。

今回はバージョン4のプラグインを使用していますが、バージョン3だと記述方法が少し違うところがあるようなので注意してください。

使い方

下記からダウンロードできます。
GitHub – desandro/masonry: Cascading grid layout library

HTML内に必要なファイルを読み込みます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="./masonry.pkgd.min.js"></script>

HTML

<div class="grid">
	<div class="grid-item">
		<div class="grid-item_image"><img src="http://placehold.it/300x300" width="300" height="300"></div>
		<p class="grid-item_text">1番目</p>
	</div>
	<div class="grid-item">
		<div class="grid-item_image"><img src="http://placehold.it/300x140" width="300" height="140"></div>
		<p class="grid-item_text">2番目</p>
	</div>
	～略～
	<div class="grid-item">
		<div class="grid-item_image"><img src="http://placehold.it/140x140" width="140" height="140"></div>
		<p class="grid-item_text">10番目</p>
	</div>
</div>

CSS

.grid {
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
}
.grid-item {
	margin: 10px;
}

JavaScript

columnWidthは1列の幅をいくつにするか設定するオプションで、今回の場合は最小幅140px + marginが左右合わせて20pxなので160で設定しています。

$(function() {
	$('.grid').masonry({
		columnWidth: 160
	});
});

Masonry.jsのデモページ
　

上記サンプルでは画像の高さを指定しているので問題ありませんが、高さ指定がない場合、画像の高さが取得できる前にレイアウトしてしまうので崩れてしまいます。

HTML

<div class="grid">
	<div class="grid-item_sizer"></div>
	<div class="grid-item grid-item_w300">
		<div class="grid-item_image"><img src="http://placehold.it/300x300"></div>
		<p class="grid-item_text">1番目</p>
	</div>
	<div class="grid-item grid-item_w300">
		<div class="grid-item_image"><img src="http://placehold.it/300x140"></div>
		<p class="grid-item_text">2番目</p>
	</div>
	～略～
	<div class="grid-item grid-item_w140">
		<div class="grid-item_image"><img src="http://placehold.it/140x140"></div>
		<p class="grid-item_text">10番目</p>
	</div>
</div>

CSS

.grid-item_w140 {
	width: 140px;
}
.grid-item_w300 {
	width: 300px;
}

JavaScript

$(function() {
	$('.grid').masonry({
		columnWidth: 160
	});
});

画像に高さ指定がない場合のデモページ

$(window).load()を使うことで、画像の高さが取得できるようになってからレイアウトするようになります。

JavaScript

$(window).load(function() {
	$('.grid').masonry({
		columnWidth: 160
	});
});

画像に高さ指定がない場合の対応後のデモページ
　

JavaScriptでの設定ではなく、data属性の付与で設定することもできます。

HTML

<div class="grid" data-masonry='{"columnWidth": 160}'>
	<div class="grid-item">
		<div class="grid-item_image"><img src="http://placehold.it/300x300" width="300" height="300"></div>
		<p class="grid-item_text">1番目</p>
	</div>
	<div class="grid-item">
		<div class="grid-item_image"><img src="http://placehold.it/300x140" width="300" height="140"></div>
		<p class="grid-item_text">2番目</p>
	</div>
	～略～
	<div class="grid-item">
		<div class="grid-item_image"><img src="http://placehold.it/140x140" width="140" height="140"></div>
		<p class="grid-item_text">10番目</p>
	</div>
</div>

data-masonryを「”」で括るとSyntaxErrorが出てしまうので、「’」で括らないと駄目なようです。
Masonry.jsのデモページ2
　

オプション・メソッド・イベント

各設定の詳細はこちらのサイトにありますのでご確認ください。

オプション

メソッド

イベント

【参考サイト】

• Masonry