リストなどをタイル状に並べて要素の高さをそろえたいときに困ったことはありませんか？(´・ω・`)

テキストの長さが変わったり、画像があったりなかったりなど、要素の高さが異なる場合にずれて表示されてしまうことがあります。

今回は要素の高さを揃えるjQueryプラグイン「jquery.tile.js」をご紹介します。

それではどうぞ！

「jquery.tile.js」プラグインの使用方法

ファイル読込

下記から「jquery.tile.js」をダウンロードします。

「jquery.tile.js」
http://urin.github.io/jquery.tile.js/

以下のようにダウンロードしたファイルを読み込みます。

HTML

今回はliタグに指定していますが、divでも問題ありません。

JS

.tile()の()内には「列の数」を指定します。
数値を指定しなくても動きますが、以下の点で指定するかしないかを判断します。

・列の個数を指定しない場合
　全てのリストの中から最大の高さを出力するので、全てのリストの最大の高さが同じになる

・列の個数を指定した場合
　列を指定すると、1行ごとのリストの中から最大の高さを出力するので、行ごとに高さは異なる

また、中に画像を入れていた場合は画像を読み込む前にJSが動くため崩れてしまいます。
そのときはこのように記述します。

サンプル

「jquery.tile.js」を使用したデモページを用意しました。

デモ1が「列の個数を指定しない場合」、デモ2が「列の個数を指定した場合」です。

「jquery.tile.js」プラグインを使用したデモページ

まとめ

以上、要素の高さを揃えるjQueryプラグイン「jquery.tile.js」をご紹介しました。

要素の高さを揃えるjQueryプラグインはいくつかありますが、軽量で簡単なことがjquery.tile.jsのメリットです。簡単、キレイに並べることが出来るのでとっても便利ですよね(*´ω｀*)