jquery.square.jsは、スクエアなグリッドレイアウトを実装することができるjQueryプラグインです。レスポンシブに対応し、いろんなデバイスから最適なレイアウトで閲覧できます。シンプルで美しいグリッドレイアウトを実装したい人は要チェックです。
jquery.square.js
以下、jquery.square.jsの実際のデモページになります。
デモページでは、スクエアなアイテムがグリッドレイアウトで綺麗に並べられています。レスポンシブにも対応していることから、ブラウザ幅を縮小・拡大していくとそれに合わせて最適化されます。
アイテムはほとんどが同じサイズのものが多いですが、いくつか異なるサイズのアイテムも表示されています。異なるサイズでも綺麗なグリッドレイアウトになるように配置されています。
ブログのトップページや企業の新着情報など、応用次第で使いどころはいろいろありそうですね。
各アイテムはこんな感じでシンプルにマークアップすることができます。
<div class="square">
<div class="inner">
<h2>サンプルテキスト</h2>
<p>サンプルテキスト</p>
</div>
</div>
また、オプションには以下の項目が用意されています。
- target
- inner
- scaleSplit
- width
- height
- space
- speed
- duration
デフォルト値は、targetが”square”、innerが”.inner”、scaleSplitが”_”、widthが150、heightが150、spaceが10、speedが700、durationが500です。
というわけで、レスポンシブに対応したスクエアなグリッドレイアウトを実装できる「jquery.square.js」の紹介でした。ライセンスはMITとのこと。jquery.square.jsの詳細やダウンロードは、以下からどうぞ。
