【Masonry】ギャラリーサイトに最適!おしゃれなグリッドレイアウトが実装出来るJavaScriptプラグインの使い方を解説

2019-08-20
Writing by Jyu

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

 

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

 

エンジニアたるもの、いかに効率よく実装するか!!

 

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

 

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

TOPICS

Masonryって?

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

 

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

 

こちらのデモをご覧ください。

PCで見て、幅を変更してみてください。自動でコンテンツが再配置されるのがわかると思います。

 

Masonryは軽量であるため、パフォーマンスの観点からも優秀なプラグインです。

Masonryの使い方

以下、基本的な使い方となります。

  1. JavaScriptファイルをHTML内で読み込む
  2. HTMLを記述
  3. CSSを記述
  4. JavaScriptを記述

JavaScriptファイルをHTML内で読み込む

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

 

1, Masonry

まずは、Masonryファイルのダウンロードを行います。

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

実行後、「masonry-docs.zip」がダウンロードされたかと思います。

 

masonry-docs.zipは、以下の構成となっています。

masonry-directory

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

上記のファイルが、HTML内で読み込むJavaScriptファイルとなります。

 

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

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

 

またCDNを利用することもできます。

以下のコードをhead内に記述し、終了となります。

 

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

 

2, imagesLoaded

こちら「指定した画像を全て読み込んだら、この関数を実行する」といった処理を簡単に実装してくれるプラグインです。Masonryのみでも動作はしますが、画像読み込み前に関数が実行されてしまい、画像が重なってしまうといったことが起きてしまうため、imagesLoadedを使用して回避します。

 

ダウンロードは、 公式サイト の『Install → imagesloaded.pkgd.min.js minified』から行います。『imagesloaded.pkgd.min.js minified』をクリックすると、コードが表示されますので、そちらをコピーし、自身でJavaScriptファイルを作成、貼り付けを行います。(ファイル名は任意で構いません。)

 

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

 

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

 

また、上記以外にGit hubからのダウンロードも可能となっております。

HTMLを記述

HTMLはいたってシンプルです。

今回はリストを使用していますが、divでも構いません。

 

<div class="wrap">
  <ul id="demo1">
    <li class="item"><img src="img/sample1.jpg"></li>
    <li class="item"><img src="img/sample2.jpg"></li>
    <li class="item"><img src="img/sample3.jpg"></li>
    <li class="item"><img src="img/sample4.jpg"></li>
    <li class="item"><img src="img/sample5.jpg"></li>
    ・・・
  </ul>
</div>

 

ここで、コンテナとなる要素(今回の場合ul)にid、コンテンツとなる要素(li)にclassを指定するのをお忘れなく!

CSSを記述

CSSは、最低限ここら辺を記述しておけばOKです!

特別な記述はありませんね!

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

 

.wrap {
  width: 90%;
  margin: 0 auto;
}
  
#demo1 {
  margin: 0 auto;
}
  
.item {
  width: 200px;
}
  
.item img {
  width: 100%;
}

JavaScriptを記述

以下、最低限の動作をさせるためのコードとなります。

 

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

 

特に難しく感じる箇所はないかと思います。

 

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

 

以下の箇所がimagesLoadedのコードとなります。

Masonry関数を以下のコードで囲うことで、#demo1内の全ての画像が読み込まれた段階でMasonry関数を実行でき、「画像が読み込まれる前にMasonryが実行され画像が重なってしまう」といった挙動を防ぐことができます。

 

var $demo1 = $('#demo1');
  
$demo1.imagesLoaded(function(){
  //画像読み込み完了後に実行する関数を記述 (今回の場合、Masonry関数)
});

 

以上で基本的なグリッドレイアウトの実装が完了となります。

とても簡単ですよね!

もちろんコピペOKですので、ご自由にお使いください!

上記コードで作成したものがdemo1になります。

実際に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
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のみ無効」としたい場合が出てきます。

Masonryでは、デバイスを指定するオプションは用意されていないため、現在のSP主流サイズ「480px」を設定し実装します。

 

「480px」以下(SP)の場合、コンテンツ横幅100%、

「480px」以上(TAB, PC)の場合、Masonryを有効にし、グリッド配置する方法について解説していきます。

 

<div class="wrap">
  <ul id="demo2">
    <li class="item"><img src="img/sample1.jpg"></li>
    <li class="item"><img src="img/sample2.jpg"></li>
    <li class="item"><img src="img/sample3.jpg"></li>
    <li class="item"><img src="img/sample4.jpg"></li>
    <li class="item"><img src="img/sample5.jpg"></li>
    ・・・
  </ul>
</div>

 

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

 

.wrap {
  width: 90%;
  margin: 0 auto;
}
  
#demo2 {
  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」を指定します。

 

jQuery(function($){
  var sp = 480;  //SPのサイズを設定
  
  function masonry_execute() {
    var $demo2 = $('#demo2');    //コンテナとなる要素を指定
  
    if ( $('html').width() < sp ) {    //ウィンドウ幅が480px以下だった場合、masonry破棄 (無効)
      $demo2.masonry('destroy');
    } else {                              //ウィンドウ幅が480px以上だった場合、masonry適応
      $demo2.imagesLoaded(function(){
        $demo2.masonry({
          itemSelector: '.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関数を実行しています。

こちら、省略してしまうと正常に動作しなかったり、挙動に不具合が生じますので、必ず記述しましょう!

 

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

 

上記コードで作成したものがdemo2になります。

スクロールに連動させる

スクロール連動型のグリッドレイアウトは、実務において、最も頻出するレイアウトです。

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

 

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

 

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

 

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

 

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

 

僕が制作案件で使用したのは、ほとんどがスクロール連動型でした。

スクロール連動型に関しては、詳しくはnoteで解説したいと思います。実験的に有料にしてみます。実務向けなので、もし興味がある方は購入してみてください。

※現在制作中

まとめ

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

 

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

 

使い方も非常に簡単ですので、ご興味のある方は是非チェックしてみて下さい!

参考URL

-Masonry 公式サイト
https://masonry.desandro.com/

-Masonry Git hub
https://github.com/desandro/masonry

-MiniMasonry.js Git hub
https://github.com/Spope/MiniMasonry.js/

-wow.js 公式サイト
https://www.delac.io/wow/

-Animate.css 公式サイト
https://daneden.github.io/animate.css/