Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

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

様々なプラグインがあるが、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を取得するため。

mimoe
2013.04から1年間、専門学校でアプリ開発の勉強をし、2014.04からWeb制作会社で、主にフロントエンドの仕事をしています。 前職は接客だったので、プログラム関係Web関係はまだまだ初心者です。 自分の備忘記録のためにも書きます。
http://ameblo.jp/mimoesnotepad
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away