equalheight.js を使ってレスポンシブなカラムの高さ揃えをする

EqualHeight.jsは複数カラムの縦幅を揃えてくれるjQueryプラグインです。
レスポンシブにも対応していてとっても便利です！

デモページ

EqualHeight.js-配布サイト

基本的な使い方

常に特定のカラムの高さを揃えたい場合は、以下のように使います。

JavaScript

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="jquery.equalheight.min.js"></script>
<script>
$(document).ready(function () {
    $('.column2 p').equalHeight(); //高さを揃えたい要素を指定
});
</script>

css

.column2 {
    width: 100%;
    overflow: hidden;
}
.column2 div {
 float: left;
 width: 50%;
}
.column2 div p{
 margin: 10px;
 padding: 10px;
 background: #FCCDE4;
}

複合的な使い方

上の段はずっと2カラムのままで、下の段は横幅639px以下は1カラム、640px以上は2カラム、800px以上は4カラムになるようにしています。
こちらの方法でIE7,8に対応する方法は見つからなかったので、その場合はこちらの記事をご参考ください。

JavaScript

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="jquery.equalheight.min.js"></script>
<script>
$(document).ready(function () {
    //上の2カラムの高さ揃え
 $('.column2 p').equalHeight(); //高さを揃えたい要素を指定

    //下の4カラムの高さ揃え
    var equalHeight = $('.column1-2 p').equalHeight({wait: true});
    // Browser supports matchMedia
    if (window.matchMedia) {
        // MediaQueryList
        var mql = window.matchMedia("(min-width: 640px)"); //このサイズ以上で高さ揃えを行う
        // MediaQueryListListener
        var equalHeightCheck = function (mql) {
            if (mql.matches) {
                equalHeight.start();
            } else {
                equalHeight.stop();
            }
        };
        // Add listener
        mql.addListener(equalHeightCheck);
        // Manually call listener
        equalHeightCheck(mql);
    }
    // Browser doesn't support matchMedia
    else {
        equalHeight.start();
    }
});

css

.column2 {
    width: 100%;
 overflow: hidden;
}
.column2 div {
 float: left;
 width: 50%;
}
.column2 div p{
 margin: 10px;
 padding: 10px;
 background: #FCCDE4;
}
.column1-2 {
 width: 100%;
 overflow: hidden;
}
.column1-2 div p {
 background: #ddd;
 margin: 10px;
 padding: 10px;
}
@media (min-width: 640px) {
 .column1-2 div {
  width: 50%;
  float: left;
 }
}
@media (min-width: 800px) {
 .column1-2 div {
  width: 25%;
  float: left;
 }
}

デモページ