JavaScript
高さ揃え

高さ揃えを実装するときの候補jsとその実装方法

More than 3 years have passed since last update.

色々あって何を使うか悩んだり、どう使うか忘れるので覚書です。


heightLine.js

配布先

利点:

1. 親要素にclassをふることで、子要素の高さを揃えられ、手間が減る。

- 統一したいブロック要素に「.heightLine」

- グループ別けして統一「heightLine-(group1)」かっこ内は任意の名前でok

- 親要素にclassを振って子要素全ての高さを統一「.heightLineParent」


jQueryAutoHeight.js

配布先

利点:

1. n番目ごとかを選べる

2. min-heightとheightを選べる

3. js用に新規classを振らずにすむ(既存の名前でjsを動かせる)

4. clearが出来る


  • 統一したいブロック要素を指定する

<script type="text/javascript">

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


  • 揃えたい数を決めて一行毎に高さを揃える

jQuery(function($){

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


  • 更にfloatを解除できるようにする

jQuery(function($){

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


  • heightで揃えるように変更する

jQuery(function($){

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


jquery.tile.js

配布先

利点:

1. n番目ごとかを選べる

2. js用に新規classを振らずにすむ(既存の名前でjsを動かせる)


  • 統一したいブロック要素を指定する

<script type="text/javascript">

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


一塊の中だけで判断して高さをそろえる

・親要素が複数

・さらに子要素も不特定多数で増減する

ような場合。

「.hogeを3つごとに高さ揃えする」といった指定だと

親要素をまたがっても、3つ目ごとの要素で高さを揃えられて、ちぐはぐなことになるときがある。

その場合はeachをつけることで解決。

以下はtile.jsの場合。

<script type="text/javascript">

$(function(){
$('揃えたい親セレクタulとか').each(function(){
$(this).find('その子要素liとか').tile(そろえたい数);
});
});
</script>