高さ揃えのjQueryプラグインを比較してみた

JavaScript

要素の横並びなど、高さを揃えたいときに使っているjQueryのプラグインをご紹介します。

jQueryAutoHeight.js

jquery.heightLine.js

$(".box0>div").heightLine();

オプションが豊富なのと、レスポンシブに対応しているので便利だと感じました。

maxWidthオプション：ウィンドウ幅640px以下の場合のみ高さを揃えたい場合はmaxWidthを指定。

$(".box1>div").heightLine({
  maxWidth:640
});

minWidthオプション：上のmaxWidthの逆です。また、同時にも使えます。

destroyメソッド：設定されたheightLineを取り除きたい場合はdestroyメソッドを利用します。

$(".box0>div").heightLine("destroy");

refreshメソッド：コンテンツの内部が変更された場合などはrefreshメソッドで再度高さの設定が可能です。

$(".box0>div").heightLine("refresh");

jquery.tile.js

もしかしたらこのプラグインを使う回数が多い気がします。heightLine.jsと違って画像を含めた場合でも問題なく揃えてくれます。
tile() の中に横並びのカラム数を指定できるのでそれもまた良いです。（例：４カラムずつの場合、 $('.box').tile(4);）

$(function(){
  $('揃えたいセレクタ').tile(そろえたい数);
});

jQueryAutoHeight.js

tile.jsと同じ頻度で使っています。カラムが指定できて便利です。

公式のサンプル「複数のボックスの高さを最大値にそろえるjQueryプラグイン」
http://tinybeans.github.io/jQueryAutoHeight/

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

アコーディオンを実装する際はjQueryAutoHeight.jsが良かった気がします。アコーディオンで最初hideにしておく要素内に高さ揃え系のプラグインを使用した時、高さが０になって潰れてしまう時は一度こちらのプラグインに変更してみてください！

高さ揃えに関しては他にも比較してみた系の記事がありましたので、こちらもぜひ！↓
高さ揃えを実装するときの候補jsとその実装方法