コンテンツの高さをそろえる。

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

様々なプラグインがあるが、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>

<style>
    .item{
        float: left;
        width: 300px;
    }
<style>

<script>

$(function(){
    var item = $('.item');

    function setHeight(n){

        var itemL = item.length;

        item.height('auto');

        for(var i = 0; i < Math.ceil(itemL / n); i++){

            var maxHeight = 0;

            for(var j = 0; j < n; j++){
                var 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);

});

</script>


例えばこんな感じ。
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の関数を分岐する。

<script>

$(window).on("load resize",(function(){
    var item = $('.item');

    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');
    }

});

</script>

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