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

画像やカード型コンテンツをレンガ状に敷き詰めて配置する、レスポンシブ対応のMasonryレイアウトを簡単に実装できる超軽量(4kb)スクリプトを紹介します。

jQueryやCSSなど、他のファイルは一切不要で、単体で動作します。

デモのキャプチャ

Macy.js
Macy.js -GitHub

Macy.jsの特徴

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

Macy.jsのデモ

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

デモのキャプチャ

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

デモのキャプチャ

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

デモのキャプチャ

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

Macy.jsの使い方

Step 1: 外部ファイル

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

Step 2: HTML

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

Step 3: JavaScript

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

top of page

©2017 coliss