高さそろえるJS・jQueryプラグインまとめ

とりあえず有名そうなものだけ。

heightLine.js

機能

特定のクラスがある要素で高さをそろえる
親要素に特定のクラスを指定すれば子要素の高さをそろえる
グループ分けができる

メリット

ブラウザの機能で文字サイズ拡大しても、追従してくれる

デメリット

簡単に行でそろえるのができない

配布

補足

最近レスポンシブ対応したjQueryプラグイン「jquery.heightLine.js」が出た
http://blog.webcreativepark.net/2013/10/21-112000.html

jQueryAutoHeight.js

機能

セレクタの指定で高さをそろえる
1行のカラム数を指定できる

メリット・デメリット

使ったことない
だれかメリット・デメリット教えてください

配布

jquery.tile.js

機能

セレクタの指定で高さをそろえる
1行のカラム数を指定できる

メリット

行を指定できる

デメリット

ブラウザの機能で文字サイズ拡大に追従しない
行の数が変わったら対応できない（レスポンシブとかできない）
途中で行の数に足りないところがあれば、高さずれちゃう（下のような感じのとき）

$(funciton(){
    $('ul li').tile(3);
});
h2
ul>li*2
h2
ul>li*3 //ここが高さずれちゃう

途中で行の数に足りないところがあれば、高さずれちゃうの解決法

こうすれば大丈夫だった。

$(funciton(){
    $('ul').each(function(i){
        $(this).find('li').tile(3);
    });
});

配布

Right Height

機能

• 高さを揃えるエリアを指定できる
• レスポンシブ対応

配布

cferdinandi/right-height

配布

jquery.matchHeight.js

これが一番いいかも。

機能

• 勝手に行ごとに高さを揃えてくれる
• レスポンシブ対応

デモ

jquery.matchHeight Browser Tests

配布

liabru/jquery-match-height

まとめ

文字サイズ拡大で追従する機能を持ちつつ、
セレクタの指定で高さをそろえられて、
1行のカラム数指定しなくても行ごとに高さそろえられるJSがほしいと思いました