コンテンツの高さをそろえたい #JavaScript

文字数が違ったり、写真の大きさが違った場合でも、横のコンテンツの高さをそろえたい。

様々なプラグインがあるが、jQueryのバージョンを変えたりした際に、合わなくなってしまったりしてしまうので、js/jQueryだけでかけないかと考えてみた。

以外と短くかけた。

<ul class="items">
    <li class="item">あああああああああああああああ</li>
    <li class="item">いいいいいいいいいいいいい</li>
    <li class="item">ううううううううううううううううううううううううううう</li>
    <li class="item">えええええええええええええええええええ</li>
    <li class="item">おおおおおおおおお</li>
    <li class="item">かかかかかかかかかかかかかかか</li>
    <li class="item">ききき</li>
    <li class="item">くくくくくくくくくくくくくくくくくくくくくくくくくくくくくくくくくく</li>
    <li class="item">けけけけけけけけけけけけけ</li>
    <li class="item">こここここここここ</li>
</ul>

.items{
    list-style: none;
    width: 300px;
}
.item{
    float: left;
    width: 100px;
}

$(function(){
    var item = $('li.item');
    var itemLength,maxHeight,itemHeight;
    function setHeight(n){
        itemLength = item.length;
        item.height('auto');
        for(var i = 0; i < Math.ceil(itemLength / n); i++){
            maxHeight = 0;
            for(var j = 0; j < n; j++){
                itemHeight = item.eq(i * n + j).height();
                if(itemHeight > maxHeight) {
                    maxHeight = itemHeight;
                }
            }
            for(var k = 0; k < n; k++){
                item.eq(i * n + k).height(maxHeight);
            }
        }
    }
    setHeight(3);
});

例えばこんな感じ。
setHeightという関数は、"nの数字が横に並ぶ数"という条件で動く。
例えば"3"なら、横に3つずつ、4つめが下に折り返し、4列めは10つめのブロックのみの状態。

簡単に解説。
itemというclassを持っている数を数える。
itemの数をnの数で割って、繰り上げした数ループする。(縦に並ぶ列の数。ここでは4)
maxHeightの高さを0に設定する。
その中で、n回ループする。(4列の中の1列で、左からn個)
その中で、もし、maxHeightがそのitemの高さより小さかったら、上書きする。
これをn回繰り返したら、この列のheightにmaxHeightを設置する。
これを列(ここでは4)の回数繰り返す。

レスポンシブなど、可変に対応させる場合。
setHeightの関数を分岐する。

$(window).on("load resize",(function(){
    var item = $('.item');
    var itemLength,maxHeight,itemHeight;
    function setHeight(n){
        //上記と同じなので省略
    }
    var winWidth = $(window).width();
    if(winWidth > 1000){
        setHeight(3);
    }else if(winWidth <= 1000 && winWidth > 768){
        setHeight(2);
    }else if(winWidth <= 768 ){
        item.height('auto');
    }
});

このような感じ。
一番狭いとき(横には1つしか並ばず、全て下に並ぶ場合)は、この関数を使う必要がないので、heightはautoに設定する。
関数の最初に"tem.height('auto');"と書いたのは、可変をしたり、クリックした後などに関数を使う場合、設置されたheightではなく、元々のheightを取得するため。