模写修行メディア

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

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

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

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

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

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

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

JavaScriptの勉強ができるおすすめの本やサイト紹介!

👇 メンターやってます 👇

模写修行やこのメディアを作ったエンジニア中心に、メンタリングサービスHello Mentorを運営しています。

0からweb制作やプログラミングの勉強を始める方はもちろん、12ヶ月以上独学している方や既にお仕事をしている方にもご利用いただいています!

模写武者くんのアイコン
  • 独学に限界を感じている...
  • 何をどこまで勉強すれば良いかわからない...
  • 自分の書き方が正しいかわからない...
  • 検索しても解決しない問題が多い...
  • 転職や副業のアドバイスが欲しい...

このような方は、ぜひ下記のリンクからサービス詳細をご覧ください。個別説明会もお気軽にお申し込みください。

※ 少人数運営のため人数制限あり ※

詳しいサービス内容を見る

転職・独立成功者も出ています!

👆 メンターやってます 👆

この記事の目次

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関数を実行できます。

【駆け出しの方へ】独学に限界を感じてませんか?

プログラミングやデザインは独学可能ですが、ほとんんどの方が苦戦します。

↓このように感じていませんか?

  • 何をどこまで勉強すれば良いかわからない...
  • 自分の書き方が正しいかわからない...
  • 検索しても解決しない問題が多い...
  • 転職や副業するまでの道が見えない...

そんな問題を解決するために、模写修行やこのメディアを作ったエンジニア/デザイナー中心に、メンタリングサービスHello Mentorを始めました。

スクールのような大金は必要ありません。高額な費用は払いたくないけど、プロのサポートが欲しい方は、ぜひ下記のリンクからサービス詳細をご覧ください。

※ 少人数運営のため人数制限あり ※

詳しいサービス内容を見る

転職・独立成功者も出ています!

👆 メンターは全員現役エンジニア 👆

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

独学に限界を感じていませんか?

現役エンジニアによるメンタリングサービス作りました!

模写修行やこのメディアを作ったエンジニア中心に、メンタリングサービスHello Mentorを運営しています。

👇 こんな方のためのサービスです。

  • 独学に限界を感じている...
  • 何をどこまで勉強すれば良いかわからない...
  • 自分の書き方が正しいかわからない...
  • 検索しても解決しない問題が多い...
  • 転職や副業のアドバイスが欲しい...

メンターを務めるのは、今も現役でコードを書いているエンジニアのみです。駆け出しの方やメンターだけをやっている方はいません。

高額な料金はかかりません。サブスク&入会金・解約料なしなので、リスクなく始められます。

少しでも興味がある方は、ぜひ下記のリンクからサービスサイトをご覧ください。個別説明会もお気軽にお越しください。(無理な営業等一切ございません!)

※ 少人数運営のため人数制限あり ※

詳しいサービス内容を見る

転職・独立成功者も出ています!

この記事を書いた人

Tatsukiのアイコン

Tatsuki

空間コーディネーターから独学でプログラミングを学びwebの世界へ。コーディングが好き。普段はHTML・CSS / JavaScript / Reactを主に書いています。

当メディア運営メンバーでメンターやってます!👉

詳しく見る

\Share/

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

実務レベルを体験するためのコーディング練習教材