[JS]これなら簡単！シンプルなHTMLで、Masonryレイアウトを実装できる超軽量スクリプト -Macy.js

サイト構築 -JavaScript

Post on:2017年8月18日

Macy.jsの特徴

4kbの超軽量のライブラリ、他のファイルには一切依存しません。
レスポンシブ対応、ブレイクポイントは簡単にカスタマイズできます。
HTMLは非常にシンプルな構造です。
CSSトランジションで動作します。
シンプルなイベントAPIを備えています。

Macy.jsのデモ

実際の動作は、デモページで楽しめます。
動作は非常に軽快で、快適です。

デモページ: 幅1,200pxで表示

デモページ: 幅800pxで表示

デモページ: 幅480pxで表示

Macy.jsの使い方

Step 1: 外部ファイル

当スクリプトを外部ファイルとして記述します。

<body>
  ...
  コンテンツ
  ...
  <script src="macy.min.js"></script>
</body>

<body>

...

コンテンツ

...

</body>

Step 2: HTML

親コンテナを用意し、要素を配置します。
コンテナの名前は任意のものが使用できます。

<div id="macy-container">
  <div>コンテンツ</div>
  <div>コンテンツ</div>
  <div>コンテンツ</div>
  ...
</div>

<div>コンテンツ</div>

...

</div>

Step 3: JavaScript

親コンテナを指定し、スクリプトを実行します。
オプションでは、カラム数やマージン（縦・横）、ブレイクポイントなどが自由に指定できます。

<script>
var macy = Macy({
    container: '#macy-container',
    trueOrder: false,
    waitForImages: false,
    columns: 6,
    margin: {
        x: 20,
        y: 10,
      },
    breakAt: {
        1200: 5,
        940: 3,
        520: 2,
        400: 1
    }
});
</script>