自動でboxの高さをそろえてくれるライブラリ「jquery.matchHeight.js」

導入方法

ダウンロード

GitHubにアクセスしてzipファイルをダウンロードしてください。
zipファイルを展開してjquery.matchHeight.jsを適当なディレクトリに配置してください。

コード

まずはjQuery本体と、jquery.matchHeight.jsを読み込みましょう。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
<script src="jquery.matchHeight.js" type="text/javascript"></script>

次に高さが異なるdivタグを6個つくります。
各divには共通のclass box-groupと、個別のclassを記述します。

<div class="box-group box1">
ボックス1ボックス1ボックス1ボックス1ボックス1ボックス1<br>
ボックス1ボックス1ボックス1ボックス1ボックス1ボックス1
</div>
<div class="box-group box2">
ボックス2ボックス2ボックス2ボックス2ボックス2ボックス2<br>
ボックス2ボックス2ボックス2ボックス2ボックス2ボックス2<br>
ボックス2ボックス2ボックス2ボックス2ボックス2ボックス2
</div>
<div class="box-group box3">
ボックス3ボックス3ボックス3ボックス3ボックス3ボックス3<br>
ボックス3ボックス3ボックス3ボックス3ボックス3ボックス3<br>
ボックス3ボックス3ボックス3ボックス3ボックス3ボックス3<br>
ボックス3ボックス3ボックス3ボックス3ボックス3ボックス3
</div>
<div class="box-group box4">
ボックス4ボックス4ボックス4ボックス4ボックス4ボックス4<br>
ボックス4ボックス4ボックス4ボックス4ボックス4ボックス4<br>
ボックス4ボックス4ボックス4ボックス4ボックス4ボックス4<br>
ボックス4ボックス4ボックス4ボックス4ボックス4ボックス4<br>
ボックス4ボックス4ボックス4ボックス4ボックス4ボックス4
</div>
<div class="box-group box5">
ボックス5ボックス5ボックス5ボックス5ボックス5ボックス5<br>
ボックス5ボックス5ボックス5ボックス5ボックス5ボックス5<br>
ボックス5ボックス5ボックス5ボックス5ボックス5ボックス5<br>
ボックス5ボックス5ボックス5ボックス5ボックス5ボックス5<br>
ボックス5ボックス5ボックス5ボックス5ボックス5ボックス5<br>
ボックス5ボックス5ボックス5ボックス5ボックス5ボックス5
</div>
<div class="box-group box6">
ボックス6ボックス6ボックス6ボックス6ボックス6ボックス6
</div>

各divの共通classにwidthやfloatの設定をして、わかりやすいように個別のclassに背景色を設定します。

.box-group{
    width:400px;
    float:left;
    margin:10px;
    padding:10px;
    color:#fff;
}
.box1{ background:#0000ff;}
.box2{ background:#006505;}
.box3{ background:#00A8EF;}
.box4{ background:#e29808;}
.box5{ background:#FF4E4E;}
.box6{ background:darkblue;}

各ボックスの高さが同じになるスクリプトを記述します。

$(function() {
    $('.box-group').matchHeight();
});

上記のスクリプトだと画面サイズによってはbox4かbox5ぐらいで改行されると思います。
改行された場合はその行で一番高さがあるdivと同じ高さになります。
同じclassはすべて高さを同じにしたい場合は、byRowパラメータをfalseにして設定します。

$(function() {
    $('.box-group').matchHeight({byRow: false});
});