🎉 お知らせ:サイト名が『webkore』から『模写修行 media』に変更になりました。6月以降にドメインも『moshashugyo.com/media/』へ変更する予定です。

JavaScript

JavaScriptプラグインmasonry.jsの使い方を解説!Pinterest風グリッドレイアウトが簡単に実装!

Author:Jyu

この記事の目次

web制作を行う上で、グリッドレイアウトは超頻出です。

グリッドレイアウトとは、コンテンツを格子状に並べるレイアウトのことです。

単に格子状に並べるだけであれば、特に苦労することはありませんが、『バラバラの大きさの要素を、隙間なく配置させ、かつコンテンツサイズに依存しないレスポンシブ対応したグリッドレイアウト』を自作するのは、少々面倒だったりします。

今では軽量で優れたプラグインが存在するので、予算やスケジュールによってはそちらを使用することも選択肢の1つでしょう。無理に自作したが故に、バグを抱えるといったことも避けられます。

そこで今回は、簡単にレスポンシブ対応のグリッドレイアウトを実装できるJavaScriptプラグイン、Masonryを紹介します。

Pinterest風グリッドレイアウトが作れるので、ぜひ参考にしてみてください。

Masonryとは

Masonryとは、レスポンシブ対応のグリッドレイアウトを簡単に実装できるJavaScriptプラグインです。

ギャラリーサイトやコーポレートサイトの制作実績などで、使用されているコンテンツを格子状に並べるレイアウトです。

Pinterestのスクリーンショット

Pinterestを想像するとわかりやすいかもしれません。

Masonryはファルサイズも軽量でパフォーマンスの観点からも優秀なプラグインです。

Masonryの使い方

  1. プラグインファイルを読み込む
  2. HTMLを記述する
  3. CSSを記述する
  4. JavaScriptを記述する

まずはこれらの順に、簡単に使い方を解説します。

解説では、以下のDEMO1を作成していきます。

プラグインファイルを読み込む

初めに、HTML内で読み込む2つのJavaScriptファイルをダウンロードします。


1つ目:Masonry

HTML内で読み込む、ファイルをダウンロードします。

ダウンロードは、 公式サイトの「Download these docs」から行います。「masonry-docs.zip」がダウンロードされたかと思います。

公式サイト
  • masonry-docs/masonry.pkgd.min.js

こちらのファイルが、HTML内で読み込むファイルとなります。

html
<script src="js/masonry.pkgd.min.js"></script>

ご自身の環境に合わせパスを変更し、bodyの閉じタグ直前にて読み込みます。

html
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>

CDNを利用することもできます。バージョンが変わってる場合もあるので、ご自身で公式サイトも確認してみてください。


2つ目:imagesLoaded

imagesLoadedは「指定した画像を全て読み込んだら、この関数を実行する」といった処理を簡単に実装してくれるプラグインです。

Point

Masonryのみでも動作はしますが、画像読み込み前に関数が実行されてしまい、画像が重なってしまうといったことが起きるので、imagesLoadedを使用して回避します。

ダウンロードは、 公式サイトの『Install → imagesloaded.pkgd.min.js minified』から行います。

公式サイト
html
<script src="js/masonry.pkgd.min.js"></script>
<script src="js/imagesloaded.pkgd.min.js"></script>

ご自身の環境に合わせパスを変更し、bodyの閉じタグ直前にて読み込みます。

また、Githubからのダウンロードも可能となっております。

Github

HTMLを記述する

html
<div class="wrap">
  <ul class="demo01 js-demo01">
    <li class="item js-item"><img src="img/sample1.jpg"></li>
    <li class="item js-item"><img src="img/sample2.jpg"></li>
    <li class="item js-item"><img src="img/sample3.jpg"></li>
    <li class="item js-item"><img src="img/sample4.jpg"></li>
    <li class="item js-item"><img src="img/sample5.jpg"></li>
    ・・・
  </ul>
</div>

HTMLはシンプルです。今回はリストを使用していますが、divでもなんでも構いません。

コンテナとなる要素ulとコンテンツ(アイテム)となる要素liにclassを指定してください。

CSSを記述する

css
.wrap {
  width: 90%;
  margin: 0 auto;
}

.demo01 {
  margin: 0 auto;
}

.item {
  width: 200px;
}

.item img {
  width: 100%;
}

CSSは、最低限以下を記述しておけばOKです。widthなどは、ご自身のレイアウトに合わせ変更してください。

JavaScriptを記述する

javascript
$(function () {
  var $demo1 = $('.js-demo01');   //コンテナとなる要素を指定

  $demo1.imagesLoaded(function(){ //imagesLoadedを使用し、画像が読み込みまれた段階でMasonryの関数を実行させる
    //Masonryの関数↓
    $demo1.masonry({              //オプション指定箇所
      itemSelector: '.js-item',   //コンテンツを指定
      columnWidth: 205,           //カラム幅を設定
      fitWidth: true,             //コンテンツ数に合わせ親の幅を自動調整
    });
  });
});

動作をさせるために必要なコードです。今回はjQueryを使って解説します。

前述した通り、imagesLoadedは、「指定した画像を全て読み込んだら、この関数を実行する」といった処理を簡単に実装してくれるプラグインです。

MasonryをimagesLoadedで囲うことで、.js-demo01内の全ての画像が読み込まれた段階でMasonry関数を実行できます。「画像が読み込まれる前にMasonryが実行され画像が重なってしまう」といった挙動を防ぐことができます。

Masonryのオプションや機能を詳しく見てみよう!

Masonryでは、オプションを指定することで、様々なレイアウトの実装が可能になります。

ここではより実用性のある、頻出レイアウトのみ紹介していきたいと思います。

オプション一覧

オプション名 オプション内容 デフォルト値
itemSelector コンテンツ要素を指定
*設定推奨
コンテナの子要素
columnWidth グリッドの1列分の幅
*設定推奨
最初のグリッドのouterWidth
gutter コンテンツ間の水平方向のマージンを設定 0
horizontalOrder コンテンツの並び順を左から右に維持 false
percentPosition コンテンツ幅を%指定にするかどうか false
stamp 指定した要素を避けて配置 なし
fitWidth コンテナ幅をコンテンツ幅に合わせて調整するかどうか
trueにした場合、中央揃えとなる
false
originLeft コンテンツの水平方向の並び順を左から右にするかどうか
true : 左から右
false : 右から左
true
originTop コンテンツのを垂直方向の並び順を上から下にするかどうか
true : 上から下
false : 下から上
true
containerStyle コンテナに適用するスタイル position: relative
transitionDuration グリッド配置時のアニメーション時間 0.4s
resize ウィンドウリサイズ時に並び替えをするかどうか true
initLayout 初期化時にレイアウトを有効にするかどうか true

補足が必要なgutterとfitWidthだけ簡単に解説します。


gutter

gutterは、コンテンツ間の水平方向のマージンを指定するオプションとなります。なお、垂直方向のマージンを指定するオプションは用意されていないため、CSSのmarginを使用し、設定します。


fitWidth

fitWidthは、コンテンツまたはcolumnWidthが固定幅(px指定)の場合にのみ機能します。%には対応していませんので、ご注意ください。また、fitWidth を使用しセンタリングを行う際は、「fitWidth: true」と設定した後に、CSS側で「margin: 0 auto」を指定する必要があります。

メソッド一覧

メソッド名 メソッド内容
layout コンテンツの再配置
コンテンツサイズの変更や追加・削除が行われた際に使用
stamp 指定した要素を避けてコンテンツを配置
unstamp stamp解除
appended コンテンツを末尾に追加
prepended コンテンツを先頭に追加
addItems コンテンツをMasonryインスタンスに追加
この際、DOMへの追加なし
remove MasonryインスタンスとDOMからコンテンツを削除
on Masonryイベントを追加
off Masonryイベントを削除
once 一度のみ実行されるMasonryイベントを追加
destroy グリッド配置を破棄
getItemElements インスタンスを配列として返す
jQuery.fn.data(‘masonry’) jQueryオブジェクトからMasonryインスタンスを取得
Masonry.data 指定要素を介してMasonryインスタンスを取得

イベント一覧

イベント名 イベント内容
layoutComplete グリッド配置後に発火
removeComplete コンテンツ削除後に発火

詳細解説は公式サイトをご覧ください。

公式サイト

画面幅を指定して特定の状況下では無効にする

  • SPのみ無効
  • 〇〇px以下は無効

制作を行っていると、このように画面幅を指定して特定の状況下では無効にしたい場合が出てきます。

Masonryでは、デバイスを指定するオプションは用意されていないため、自身でサイズを設定して、無効化します。今回の解説では、480pxより小さい場合は無効にしたいと思います。

仕様
  • 480px以下の場合、コンテンツ横幅100%
  • 480px以上の場合、Masonryを有効

まずは、DEMO2をご覧ください。


HTML

html
<div class="wrap">
  <ul class="demo02 js-demo02">
    <li class="item js-item"><img src="img/sample1.jpg"></li>
    <li class="item js-item"><img src="img/sample2.jpg"></li>
    <li class="item js-item"><img src="img/sample3.jpg"></li>
    <li class="item js-item"><img src="img/sample4.jpg"></li>
    <li class="item js-item"><img src="img/sample5.jpg"></li>
    ・・・
  </ul>
</div>

HTMLに関しては、特別な記述はありません。


CSS

css
.wrap {
  width: 90%;
  margin: 0 auto;
}

.demo02 {
  margin: 0 auto;
}

.item {
  width: 100%;
}

.item img {
  width: 100%;
}

@media screen and (min-width: 480px) {
  .item {
    width: 200px;
  }
}

CSSに関しても、特別な記述はありません。

.itemに対して、480pxより小さい場合はwidth: 100%;、480px以上はwidth: 200px;を指定します。


JavaScript

javascript
$(function () {
  var sp = 480; //SPのサイズを設定

  function masonry_execute() {
    var $demo2 = $('.js-demo02');   //コンテナとなる要素を指定

    if ( $('html').width() < sp ) { //ウィンドウ幅が480px以下だった場合、masonry破棄 (無効)
      $demo2.masonry('destroy');
    } else {                        //ウィンドウ幅が480px以上だった場合、masonry適応
      $demo2.imagesLoaded(function(){
        $demo2.masonry({
          itemSelector: '.js-item',
          columnWidth: 205,
          fitWidth: true,
        });
      });
    }
  }
  masonry_execute(); //masonry_execute関数を実行

  $(window).resize(function(){ //ウィンドウがリサイズされたら、再度masonry_execute関数を実行
    masonry_execute();
  });
});

JavaScriptでは、if文を使用し、「ウィンドウサイズが480pxより小さいかそうでないか」を判定しています。480pxより小さいの場合、destroyメソッドを使用し、グリッド配置を破棄し、480px以上の場合は、通常通りMasonryを適応させています。

ウィンドウがリサイズされたタイミングで再度、masonry_execute関数を実行しています。こちら、省略してしまうと正常に動作しないので、必ず記述しましょう。

スクロールに連動させてアニメーションする

今までのデモのように画像をあらかじめ表示しておくのではなく、スクロールに応じてフェードインで画像を表示するアニメーションです。

DEMO3をご覧ください。(PCで見たほうがわかりやすいです。)

今回は、animate.cssとwow.jsを組み合わせて実装しています。

参考サイト

以前、「スクロール連動型アニメーション」は「aos.js」というプラグインを紹介しました。

「Masonry」と「AOS」は相性が悪く、実装に手間がかかってしまいます。従って、今回はMasonryとの相性がいい、animete.cssとwow.jsを使用して実装しています。

また、スクロール連動型アニメーションは自作も簡単なので、自作しても良いと思います。

まとめ

今回は簡単にグリッドレイアウトを実装できるJavaScriptプラグイン、Masonryを紹介しました。Masonryを使用することで、効率よくグリッドレイアウトを実装できるので、ぜひ使ってみてください。

また、オプション等を使用しての、複雑なグリッドレイアウトの実装を必要としない場合は、MiniMasonry.jsでの実装をお勧めします。Masonryの簡易バージョンであり、jQueryに依存せず、JavaScriptのみでの実装が可能です。

MiniMasonry

Masonry以外にも簡単に導入できるアニメーション系のプラグインを紹介しているので、そちらも参考にしてみてください。

駆け出しエンジニアのためのコーディング練習教材

Coming Soon
© 2021 模写修行 media.