head内の記述

まずはHTMLファイルのhead部分を記述していきたいと思います。

head内にjQueryとMasonryプラグインを記述

　
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/masonry.pkgd.min.js"></script>
<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/func.js"></script>
　

1つずつ説明していきます！

まず、一番上の『jquery.min.js』はJQueryファイルを読み込むための記述ですね。

CDNから呼び出しているので、このままコピペでOKです。

2行目の『masonry.pkgd.min.js』はMasonryを動かすためのファイルです。こちらからダウンロードできます。jsの指定場所は実際の環境と照らし合わせて変更してください。

3行目は『imagesloaded.pkgd.min.js』すべての画像を読み込み終わった後に関数を実行するものです。こちらからダウンロードできます。
jsの指定場所は実際の環境と照らし合わせて変更してください。
このJSが無くてもMasonryを動かすことは可能なのですが、画像を読み込み終わる前に、Masonryが処理を開始してしまい、画像が重なってレイアウトが崩れてしまう場合があります。

4行目の『func.js』にjsを実行する為の記述を書いていきます。。
今回は『func.js』という名前にしていますが、任意で結構です。jsの指定場所も実際の環境に合わせて変更してください。

タイル状に並べる部分の記述

　
<ul id="gallery" >
  <li class="item"><img src="./images/dummy.jpg"></li>
  <li class="item"><img src="./images/dummy2.jpg"></li>
  <li class="item"><img src="./images/dummy2.jpg"></li>
  ・
  ・
  ・
</ul>
  

タイル状に並べるコンテンツをulで囲んでliで並べています。

ulの『id』とliの『class』は必ず設定してください。id名とclass名はどちらも任意です。

CSSはだいたいこんな感じで設定しています。

CSSの記述

　
#gallery {
    margin: 0 auto;
    overflow: hidden;
}

#gallery li {
    max-width: 300px;
    padding: 5px;
}

#gallery li img {
    max-width: 100%;
    height: auto;
}
  

特に解説する内容もありませんので、続いてJSファイルを記述していきます。

func.jsの中身を記述

　
jQuery(function($){

  //コンテンツを囲む要素をidで指定
  var container = document.querySelector('#gallery');

  //すべての画像を読み込み終わった後に関数を実行
  imagesLoaded(container, function () {
    var msnry = new Masonry(container, {
      itemSelector: '.item', //コンテンツのclass名
      isFitWidth: true, //コンテナの親要素のサイズに基づいて、コンテンツのカラムを自動調節します。
      columnWidth: 310, //カラムの幅を設定
    });
  });
});
  

今回のデモの『func.jp』の中身はこんな感じです。

それぞれご自身の環境に当てはめて設定してください。

これで先ほどのデモと同じ内容の物ができました！

あくまでも一例ですので、Masonryの詳しい使い方はこちらも参考にしてみてください

【応用編】JSの処理が終わるまでロード画面を表示する。

今回のデモページのように画像の数も少なく重くない場合は、Masonryがすぐに実行されるので問題ないのですが、画像の数が多くなってきたりするとMasonryの実行までに時間がかかってくるようになります。

そこで少し改良版を作ってみました。

まずは改良版のデモページをご覧ください。

画像の読み込みが終わるまでロード画面が表示されるようになっています。（画像の処理に時間がかかる様子を再現するために、デモ画面ではsetTimeoutを使用しています。）

HTMLファイル、CSSファイル、JSファイルに追加を加えていきます。

head内にアイコンフォントの記述を追加する

　
<-- アイコンフォントを使用するための記述 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/masonry.pkgd.min.js"></script>
<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/func.js"></script>
　

ハイライトされている部分が追加で記述する部分です。

今回でもページではロード中のアイコンにはアイコンフォント『Material Design Iconic Font』を使用しています。

『Material Design Iconic Font』についてはアイコンフォントの使い方を『Material Design Iconic Font』で解説で詳しく解説していますので、詳しい使い方はそちらを参照してください！

続いて、HTMLのbody内の記述に変更を加えていきます。

HTMLのbody内の記述

　
<!-- ロード中に表示する内容 -->
<div id="loading">
  <p class="btn btn-default btn-lg">
    <i class="zmdi zmdi-rotate-right zmdi-hc-spin"></i>
  </p>
</div>

<!-- ロードが終了してから表示する内容 -->
<ul id="gallery" >
  <li class="item"><img src="./images/dummy.jpg"></li>
  <li class="item"><img src="./images/dummy2.jpg"></li>
  <li class="item"><img src="./images/dummy2.jpg"></li>
  ・
  ・
  ・
</ul>
  

こちらもハイライトされている部分が追加で記述する部分です。

id名「loading」は任意ですが、後述のJSファイルで同じ名前を指定するのを忘れずに。

CSSの追加

　
#loading {
    text-align: center;
    position: absolute;
    width: 70px;
    height: 70px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    margin: auto;
}

#loading p {
    text-align: center;
    font-size: 70px;
}

#gallery {
    margin: 0 auto;
    overflow: hidden;
    transition: opacity 0.3s;
    opacity: 0;
    max-height: 100vh;
    box-sizing: border-box;
}

#gallery.on {
    opacity: 1;
    max-height: 100%;
}

#gallery li {
    max-width: 300px;
    padding: 5px;
}

#gallery li img {
    max-width: 100%;
    height: auto;
}
  

CSSはだいたいこんな感じで書いています。

今回、#gallery部分はopacityで表示非表示を切り替えているので、追加部分で最低限必要なのはそこでしょうか。

最後にJSファイルの記述です。

func.jsの中身を記述

　
jQuery(function($){

  var container = document.querySelector('#gallery');

  imagesLoaded(container, function () {
    var msnry = new Masonry(container, {
      itemSelector: '.item', //コンテンツのclass名
      isFitWidth: true, //コンテナの親要素のサイズに基づいて、コンテンツのカラムを自動調節します。
      columnWidth: 310, //カラムの幅を設定
    });

    $('#loading').fadeOut(300); //画像が読み込み終わったらloadingを非表示にする
    $('#gallery').addClass('on'); //コンテナにclassを付与して表示を切り替える

  });
});
  

最後にローディング画面から読み込み後の画面に切り替える記述を追記しています。

これで改良版のデモページと同じ物ができたと思います！

まとめ

今回は単純にMasonryの使い方だけでなく、すこし応用編も加えてみました。

簡単な記述どうしを組み合わせるだけで、結構使い勝手の良さそうなタイル形レイアウトを作ることができました。

ぜひ皆さまも試してみてください！

では、また。