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
 

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

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

オプション

columnWidth グリッド配置の1列分の幅を指定。
設定がない場合は最初のグリッド要素のouterWidthを使用。
必須ではないが設定推奨。
itemSelector グリッド配置にする要素を指定。
必須ではないが設定推奨。
デモページ
percentPosition グリッド配置をパーセント指定にするかどうかを設定。
デモページ
gutter グリッド要素の水平方向の間隔を設定。
初期値は0。
デモページ
stamp 指定した要素と重なる位置にグリッド配置されなくなる。
デモページ
fitWidth グリッド配置の親要素の幅をグリッド配置の幅に合わせて設定するかどうか。
デモページ
originLeft グリッド配置の水平の流れを左から右にするかどうかを設定。
初期値はtrue。
デモページ
originTop グリッド配置を垂直の流れを上から下にするかどうかを設定。
初期値はtrue。
デモページ
containerStyle グリッド配置の親要素に適用するスタイルを設定。
初期値は{ position: ‘relative’ }
デモページ
transitionDuration グリッド配置時のアニメーションの時間を設定。
初期値は’0.4s’。
デモページ
resize ウインドウサイズが変更されたときにレイアウトの調整を行うかどうか。
初期値はtrue。
デモページ
initLayout 初期化時にレイアウトを有効にするかどうかを設定。
初期値はtrue。
デモページ

メソッド

layout グリッド配置を実行する。
グリッド要素の追加・削除後に配置調整する必要がある場合などに使用。
デモページ
layoutItems 不明。
デモページ
stamp 指定した要素と重なる位置にグリッド配置されないようにする。
デモページ
unstamp stampを解除する。
デモページ
appended 末尾に要素を追加する。
デモページ
prepended 先頭に要素を追加する。
デモページ
addItems インスタンスに要素を追加する。
appendedやprependedのようにDOMには追加されない。
デモページ
remove インスタンスとDOMから要素を削除する。
デモページ
on Masonryのイベントを追加する。
デモページ
off Masonryのイベントを削除する。
デモページ
once 1回だけ実行されるMasonryのイベントを追加する。
デモページ
reloadItems グリッド要素のリロード?
デモページ
destroy グリッド配置を破棄する。
デモページ
getItemElements インスタンスの配列を返す。
デモページ
jQuery.fn.data(‘masonry’) jQueryオブジェクトからインスタンスを取得する。
デモページ

イベント

layoutComplete グリッド配置実行後に発火。
デモページ
removeComplete グリッド要素が削除された後に発火。
デモページ

 

【参考サイト】

 

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2024年10月
 12345
6789101112
13141516171819
20212223242526
2728293031