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

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

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>