画像を隙間なく詰めてピッタリ配置してくれるjQueryプラグイン「Masonry.js」

ギャラリーサイトなどで活躍しそうなjQueryプラグイン「Masonry.js」の使い方を紹介します。

縦横の大きさが違う画像を配置すると、デコボコになったり変な余白が生まれたりしますが、Masonry.jsを使えば、隙間なくピッタリと画像を配置することができるようになります!

DEMO(デモ)

Masonry.js のダウンロード

ダウンロードページにアクセスしてください。
Masonry のダウンロードページ

右上にある「Download masonry.pkgd.min.js」を右クリック → 名前をつけてリンク先を保存

ファイル名はそのままで大丈夫です。
masonry.pkgd.min.js

使い方

Masonry.js の読み込み

jQeryに依存するので、先にjQueryを読み込むことをお忘れなく!

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="masonry.pkgd.min.js"></script>

Masonryの設定(初期化)

jQuery('.grid').masonry({
  itemSelector: '.grid-item'
});

表示する要素

好きな画像を設置してください。

<div class="grid">
  <div class="grid-item"><img src="hoge.jpg"></div>
  <div class="grid-item"><img src="hoge.jpg"></div>
  <div class="grid-item"><img src="hoge.jpg"></div>
	<div class="grid-item"><img src="hoge.jpg"></div>
</div>

CSSの設定

.grid {
	margin-bottom: 1.6em;
}
.grid-item {
	width: 200px;
}
.grid-item img {
	margin: 0;
	vertical-align: bottom;
}

表示してみます

なんか崩れてる・・・

これは画像の大きさをちゃんと取得できていないために起こる問題で、解決するためにはもう1つライブラリーを入れる必要があります。

画像を正しく取得できるようになる「imagesLoaded」

imagesLoaded のダウンロードページ

ダウロードの場所は中断の「Install」エリアにあります。
右クリック → 名前をつけてリンク先を保存 で保存してください。

imagesloaded.pkgd.min.js

imagesLoaded を使ってMasonry.jsを読み込む

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="imagesloaded.pkgd.min.js"></script>
<script src="masonry.pkgd.min.js"></script>
var $grid = jQuery('.grid').imagesLoaded(function(){
	$grid.masonry({
		itemSelector: '.grid-item'
  });
});

もう一度、表示してみましょう!綺麗に表示されました。
※ 画像の種類が変わったのは大人の都合です笑

画像の間に余白を入れたい!

最後にちょっとだけカスタマイズしていきます。

ビチっと画像が詰まっていると、個人的にはちょと視認性が悪いなって感じがします。なので少し画像間の余白を作りましょう。

やり方は簡単で、先程のCSSの画像のpaddingを指定してあげるだけでOKです。

.grid {
	margin-bottom: 1.6em;
}
.grid-item {
	width: 200px;
	padding: 2px;
}
.grid-item img {
	vertical-align: bottom;
}

ちょとと余白ができてわたしは満足です!

Masonry.js を使う際の注意

画像を遅延して読み込むJavaScriptライブラリの「Lazy Load」と相性が悪いです・・・。

Masonry.jsを使う際は、Lazy Loadを使わないようにしましょう。

おわり


画像を隙間なく詰めてピッタリ配置してくれるjQueryプラグイン「Masonry.js」の紹介でした。

レスポンシブにも対応していて、画面の幅に応じていい感じに動いてくれます。
ギャラリー系のサイトを作る際にぜひご活用ください!

このページが役に立ったら
いいね!お願いします

運営の励みになります...。

関連の記事