Macy.jsの導入

Macy.js

イラストをタイル状に並べた『メイソンリーレイアウト』のギャラリーを作りたかったので、軽量で簡素なMacyを導入することにしました。

デモページ

公式サイト http://macyjs.com/
GitHub  https://github.com/bigbite/macy.js

STEP1: macy.jsの入手

GitHubよりzipファイルをダウンロード。distディレクトリ 内の 「macy.js」 を使用します。

STEP2: CSSとHTMLの準備

ここでは<ul>と<li>を使って画像を配置するので、外見を整えるためのコードをCSSに追加します。

#macy {
    list-style: none;
}

#macy li {
    display: block;
}

続いて、HTMLです。macy.jsの読み込みを行ってからオプションの設定を記述します。場所は</body>の直前にします。

下記の例の場合、 macy.js の場所はhtmlファイルと同一階層内にあるjsディレクトリ内となっています。

<!-- Macy JS の読み込み -->
    <script src="./js/macy.js"></script>

<!-- Macy JS オプションの設定 -->
    <script>
        var macy = Macy({
            container: '#macy',
            trueOrder: false,
            waitForImages: false,
            columns: 5,
            margin: {
                x: 4,
                y: 6,
            },
            breakAt: {
                1200: 5,
                992: 4,
                768: 3,
                544: 2,
                375: 1
            }
        });
    </script>

STEP3: 画像の配置

ページ内で画像をタイル状に配置したい場所に、コードを書いていきます。

 <ul id="macy">
                <li><img src="【画像のURL】"></li>
                <li><img src="./pic/1.jpg"></li>
                <li><img src="./pic/2.jpg"></li>
                <li><img src="./pic/3.jpg"></li>
                <li><img src="./pic/4.jpg"></li>
                <li><img src="./pic/5.jpg"></li>
            </ul>

macyは<div>タグを使っても同様のことが可能ですが、BootstrapUIkitのようなCSSフレームワークを使っているとソースコードが<div>だらけになるのでこちらの方法がおすすめです。

STEP4: ポリフィルの追加

基本はこのままでもOKですが、Internet Explorerでは正しく表示されません。そこで公式ドキュメントにも注意書きがあるように、IE11に対応させるためのpromise polyfill をCDNで追加します。場所はmacy.jsを読み込む直前が分かりやすいと思います。

    <!-- Macy JS をIEで有効化するための polyfill -->
    <script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js"></script>

これでIE11に対応することができました。2行あるのは、1行目で読み込んだファイルが壊れていた場合に2行目を自動的に読み込んでくれるためです。

また、IE10以前にも対応させたい場合はさらにdataset polyfillを追加する必要がありますが、ここでは割愛します。

Macyのオプションについて

レイアウトやレスポンシブ対応のためのオプションを簡単に解説します。

trueOrder

デフォルトでは個々の画像を高さにあわせて良い感じに並べ直してくれます。true にすると、画像の順番をhtmlに書いた順番どおりにします。

waitForImages

true にすると、全画像のロードが終わるのを待ってからメイソンリーレイアウトを適用します。

colomns

メイソンリーレイアウトのカラム数。デフォルト値は4。

margin

各画像の余白。横をx、縦をyで指定。 デフォルト値は0。

breakAt

ブレークポイントを指定。画面の横幅ごとに余白とカラム数を変えることができます。

例1:画面幅が1200px以下で5列、992px以下で4列、…、375px以下で1列に並べる

breakAt: {
                1200: 5,
                992: 4,
                768: 3,
                544: 2,
                375: 1
            }
        });

例2:画面幅が760px以下になったときに余白を横20px 縦10px、カラムを縦3列にする

  breakAt: {
    760: {
      margin: {
        x: 20,
        y: 10,
      },
      columns: 3
    }
  }

mobileFirst

trueにすることで、 細かい ブレークポイントの設定なしにモバイル対応が可能です。画面幅が400px以下の場合、カラムが自動的に2列になります。