masonry.jsの使い方を解説！Pinterest風グリッドレイアウトを簡単実装！

web制作を行う上で、グリッドレイアウトを作ることがあります。

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

単に格子状に並べるだけであれば、特に苦労することはありません。しかし、下記の条件を満たすレイアウトを自作するのは、少々面倒です。

• バラバラの大きさの要素を、隙間なく配置させる
• コンテンツサイズに依存せずにレスポンシブ対応

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

JavaScriptの基礎学習がまだの方は、下記の記事も参考にしてみてください。

【無料あり】JavaScriptの勉強ができるおすすめの本やサイト紹介！

私たちが運営しているHello Mentorでは、あなただけのロードマップを組んで**、迷いなく学習**できるようにサポートしています。

JavaScriptはもちろん、web制作やフロントエンド(React / Next.js)も教えることができます。

• SNS等で情報が多すぎて何が本当かわからない...
• 勉強方法が合っているか不安...
• 目指す方向性があっているのか不安...
• 検索しても解決しない問題が多い...

このような方は、ぜひ下記のリンクからサービス詳細をご覧ください。

Masonryとは

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

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

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

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

Masonryの使い方

1. Masonryのファイルを読み込む
2. HTMLを記述する
3. CSSを記述する
4. JavaScriptを記述する

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

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

Masonryのファイルを読み込む

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

💡 1つ目：Masonry

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

ダウンロードは、 公式サイトの「Download these docs」から行います。

• masonry-docs > masonry.pkgd.min.js

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

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

ご自身の環境に合わせパスを変更して読み込みます。

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

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

💡 2つ目：imagesLoaded

imagesLoadedは**「指定した画像を全て読み込んだら、関数を実行する」**処理を簡単に実装してくれるライブラリです。

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

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

ご自身の環境に合わせパスを変更して読み込みます。

Githubからのダウンロードも可能です。

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を記述する

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

.demo01 {
  margin: 0 auto;
}

.item {
  width: 200px;
}

.item img {
  width: 100%;
}

widthなどは、ご自身のレイアウトに合わせ変更してください。

JavaScript を記述する

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

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

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

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

上のように書くことで、.js-demo01内の全ての画像が読み込まれた段階でMasonry関数を実行できます。

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

Masonryでは、オプションを指定することで、様々なレイアウトの実装が可能です。より実用性のある、頻出レイアウトのみ紹介していきたいと思います。

オプション一覧

gutterとfitWidthだけ簡単に解説します。

💡 gutter

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

💡 fitWidth

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

メソッド一覧

イベント一覧

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

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

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

上のように画面幅を指定して、特定の状況下では無効にしたい場合が出てきます。

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

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

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

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

.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

$(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();
  });
});

• 480pxより小さいの場合、destroyメソッドを使用してグリッド配置を破棄
• 480px以上の場合は、通常通りMasonryを適応

if文を使用し、「ウィンドウサイズが480pxより小さいかそうでないか」を判定しています。

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

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

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

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

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

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

【超簡単】JavaScriptライブラリaos.jsの使い方を解説！

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

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

JavaScript(jQuery)でスクロールアニメーションを自作する方法を解説！

まとめ

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

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

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

【超簡単】JavaScriptライブラリaos.jsの使い方を解説！ JavaScriptライブラリRellax.jsの使い方を解説！簡単にパララックスを実装しよう！ Block Reveal Effectsの使い方を紹介！2段階アニメーションを実装しよう！

正しい方法・正しい手順でプログラミング学習しませんか？

私たちが運営しているHello Mentorは、独学で学習している方の下記の問題を解決するサービスです。

• 最適な学習計画が立てられない
• 正しい教材の選定ができない
• 間違った方向に進んでいる可能性がある
• 必須スキルの欠落に気づかない
• 30分以上悩むのは時間の無駄

メンター全員が今も現役のエンジニアです。独学の非効率さを解消して、最短でゴールを目指せる計画と学習サポートをします。

プログラミングは独学可能ですが、プロのサポートがあれば、効率的かつ安心して学習ができます。

厳しい時代も生き残れるエンジニアになりたい方は、まずは無料相談にお越しください。(強引な営業等、一切ありません！)