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

    ページ内のリンクをスムーズに移動できるsmoothScroll.jsを使ってみた

    ページ内のリンクをスムーズに移動してくれる「smoothScroll.…

  2. Image Figure Caption effects
  3. dndod

    JavaScript

    依存性のないシンプルで簡単なモーダルライブラリ「dndod」

    dndodはjQueryなどへの依存性のないシンプルで簡単なJavaS…

  4. Stackbox.js

    JavaScript

    プルプル震えるモーダルボックスを実装できるjQueryプラグイン「Stackbox.js」

    Stackbox.jsというjQueryプラグインを使えば、プルプル震…

  5. no-image
  6. jQuery RS Carousel

    JavaScript

    レスポンシブ対応のシンプルなカルーセルを実装できる「jQuery RS Carousel」

    レスポンシブ対応のシンプルなカルーセルを実装できるjQueryプラグイ…

最近の記事

  1. ハムエッグホットサンドとドリップコーヒー
  2. 高輪ゲートウェイ駅のスタバ
  3. 新幹線
  4. リッチモンドホテル
  5. ハーブバターチキン 石窯フィローネとドリップコーヒー

アーカイブ

PAGE TOP