jQuery Auto Height - 複数のカラムの高さを最大値にそろえるjQueryプラグイン

jQuery Auto Height とは

jQuery Auto Height とは、複数のボックスの高さを自動的にそろえるシンプルな jQueryプラグインです。高さのそろえ方は、次の２通りです。

• セレクタで指定したすべての要素を、その中の最大値にそろえる
• セレクタで指定した要素を、オプションで渡した数ごとに、その中の最大値にそろえる（1行ごとにそろえられる）

サンプル

• 複数のボックスの高さを最大値にそろえるjQueryプラグイン

ダウンロード

• Downloads - jquery-auto-height - Google Code

使い方

ファイルの読み込み

ダウンロードしたファイルを解凍し、適当なディレクトリにアップロードして、jQuery を読み込んだ後で jqueryAutoHeight.js を読み込みます。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jqueryAutoHeight.js"></script>

後は、これらの読み込んだファイルの後ろで、高さをそろえたいセレクタに .autoHeight() を適用すればOKです。

セレクタで指定したすべての要素を、その中の最大値にそろえる

この場合は、以下のようなコードを書けばOKです。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jqueryAutoHeight.js"></script>
<script type="text/javascript">
jQuery(function($){
    $(揃えたいセレクタ).autoHeight();
});
</script>

オプション設定

column : n

セレクタで指定した要素を、引数で渡した数ごとに、その中の最大値にそろえます。

ちょっと分かりにくいかも知れませんので図で見てみましょう。まず、下図は普通にすべての要素をそろえた状態です。

この場合のコードは先ほどの通り次のようになりますね。

jQuery(function($){
    $(揃えたいセレクタ).autoHeight();
});

これを1行ごとにそろえることができます。「1行ごと」というのは、ボックスの幅（width）が固定されているのが前提で、正確には「n個ごと」になります。

下図の場合は、1行あたりのボックス数は「4」なので、この数を .autoHeight({column:4}); のように引数として渡してあげればOKです。

コードは以下のようになります。

jQuery(function($){
    $(揃えたいセレクタ).autoHeight({column:そろえたい数});
});

clear : 1

上記の column が設定されている場合、さらに {clear:1} を続けて設定すると、その数ごとの最初の要素に clear:both を設定することができます。

コードは以下のようになります。

jQuery(function($){
    $(揃えたいセレクタ).autoHeight({column:そろえたい数, clear:1});
});

height : 'height'

高さを minHeight ではなく height でそろえます。

このプラグインでは、IE6以外は高さを「minHeight」（css だと min-height）で設定しています。これは文字サイズのみを拡大した時に文字が見えなくなってしまわないようにするためなのですが、当然その場合はボックスの高さも変わってしまいます。この minHeight を普通に height にすれば、IE6 以外は高さが変わらなくなると思います。

そのようにしたい場合は、オプションで {height:'height'} を指定すれば、minHeight ではなく height が設定されるようになります。

$(セレクタ).autoHeight({height:'height'});

reset : 'reset'

要素の高さを取得する前に、要素に指定されている style 属性を削除してから、高さを取得するようになります。普段は使わないと思います。

オプションのまとめ

$(セレクタ).autoHeight({
    // 1行のカラム数（n個）ごとにそろえる
    column : n,
    // n個ごとの先頭に clear:both; を設定する
    clear  : 1,
    // 高さを minHeight ではなく height でそろえる
    height : 'height',
    // 高さを取得する前に一度セレクタに指定されている style 属性をリセットします
    reset : 'reset'
});

jQuery Auto Height に関するブログ記事

• jQuery Auto Height をフォントサイズを変更しても高さがそろうように使う
• 複数のボックスの高さを自動で揃えるjQueryプラグイン - 1行ごとに揃えることもできるよ