模写修行メディア

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

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

この記事をシェア:

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

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

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

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

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

Masonryとは

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

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

Pinterestのスクリーンショット

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は「指定した画像を全て読み込んだら、関数を実行する」処理を簡単に実装してくれるライブラリです。

Point
Masonryのみでも動作はしますが、画像読み込み前に関数が実行されることがあります。その結果、画像が重なってしまうので、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では、オプションを指定することで、様々なレイアウトの実装が可能です。より実用性のある、頻出レイアウトのみ紹介していきたいと思います。

オプション一覧

オプション名オプション内容デフォルト値
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指定した要素を避けてコンテンツを配置
unstampstamp解除
appendedコンテンツを末尾に追加
prependedコンテンツを先頭に追加
addItemsコンテンツをMasonryインスタンスに追加 / この際、DOMへの追加なし
removeMasonryインスタンスとDOMからコンテンツを削除
onMasonryイベントを追加
offMasonryイベントを削除
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

<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段階アニメーションを実装しよう!

この記事をシェア:

模写修行のトップページのスクリーンショット
模写修行

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