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

tabellajsタッチ対応のレスポンシブなテーブルを実装できる「tabellajs」前のページ

CSS駆動によるカスタマイズ性に優れたモーダルウィンドウ「jQuery Quick Modal」次のページjQuery Quick Modal

関連記事

  1. jquery.square.js

    JavaScript

    スクエアなグリッドレイアウトを実装できる「jquery.square.js」

    jquery.square.jsは、スクエアなグリッドレイアウトを実装…

  2. JQuery SlideShow

    JavaScript

    軽量な自動スライドショー(画像・動画)を実装できる「JQuery SlideShow」

    JQuery SlideShowは、画像・動画のスライドショーを実装で…

  3. S-Pagination

    JavaScript

    スライダー付きのページネーションを実装できる「S-Pagination」

    S-Paginationはスライダー付きのページネーションを実装できる…

  4. jQuery Modal

    JavaScript

    シンプルでレスポンシブなモーダルボックス「jQuery Modal」

    jQuery Modalはシンプルでレスポンシブに対応したモーダルボッ…

  5. Scroll To Top Then Fixed Navigation Effect With jQuery and CSS
  6. Erge Drop Down Menu Control

最近の記事

  1. EOS R5
  2. Anker PowerExpand Direct 6-in-1 USB-C PDメディアハブ
  3. ペットボトルホルスター

アーカイブ

PAGE TOP