Macy.js

JavaScript

軽量なグリッドレイアウトを実装できるJSライブラリ「Macy.js」

Macy.jsは軽量なグリッドレイアウトを実装することができる便利なJSライブラリです。jQueryなどの依存性もなく、ファイル容量も4KBほどと軽量なところがいいですね。カラム数やマージンなどもオプションから手軽に設定することができます。

Macy.js

デモ

デモでは横幅が統一された異なる高さのアイテムがキレイに垂直に並べられています。レスポンシブにも対応しているので、ブラウザ幅を縮小していくと、それに合わせてカラム数も最適化していきます。

整然と並べられたアイテム群はとても美しいですね。

Macy.jsではブレイクポイントに合わせてカラム数を自分好みで指定することができます。ブレイクポイントは「breakAt」という項目から設定可能です。さらに、breakAtにはマージン(余白)を設定することもできます。

マージンは「margin」に「x」と「y」に数値を入れてあげればOKです。また、カラム数もオプションから手軽に設定可能です。カラム数は「columns」という項目に数値を指定します。デフォルト値は4です。

container、columns、trueOrder、margin、waitForImages、breakAtと、カスタマイズに最適なオプションがいろいろ用意されているのはとても便利ですね。

軽量ながらも細部までカスタム可能なグリッドレイアウトを実装したい人は、ぜひ「Macy.js」を活用されてみてはいかがでしょうか。

Macy.js

関連記事

  1. Product Tour

    JavaScript

    レスポンシブなプロダクトツアーを実装できるCSS・jQuery「Product Tour」

    Product Tourはレスポンシブに対応したプロダクトツアーを実装…

  2. TyperText

    JavaScript

    テキストタイピングエフェクトを実装できる「TyperText」

    TyperTextはテキストタイピングエフェクトを実装できるjQuer…

  3. no-image

    JavaScript

    背景にSVGによるライン(線)をランダムで生成する「ckLine.js」

    ckLine.jsは背景にSVGによるライン(線)をランダムで生成する…

  4. JavaScript

    レイアウトを超簡単に雑誌風に整列してくれるjQuery Masonryの使い方

    jQuery Masonryというプラグインを使えば、ものすごく簡単に…

  5. Simply Modal Box

最近の記事

  1. SF-G64T
  2. USB Type-C搭載ドッキングステーション
  3. RX100M6

Facebookページ

PAGE TOP