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. JavaScript

    水面にゆらゆらと波打つ動きを与えてくれるjQueryプラグイン「lake.js」

    面白そうなプラグインだったので使ってみました。画像を指定するとその画像…

  2. JavaScript

    文章の段落にコメントできるjQueryプラグイン「SideComments.js」

    おもしろそうだったのでメモがてらご紹介。SideComments.js…

  3. swipe-menu-js

    JavaScript

    横からスライド・スワイプ表示するハンバーガーメニュー実装「swipe-menu-js」

    swipe-menu-jsは横からスライド・スワイプ表示するシンプルな…

  4. OverlayScrollbars
  5. okzoom

    JavaScript

    レンズで拡大するように画像の細部をマウスオーバーでズームできる「okzoom」

    okzoomは画像細部をマウスオーバーでズームすることができるjQue…

最近の記事

  1. リンツ リンドール
  2. ジェットストリームの三色ボールペン(+シャーペン付き)と黒の替芯
  3. ブラジルイパネマ

アーカイブ

PAGE TOP