[JS]レスポンシブにしっかり対応！高さの異なるパネルを揃えたり、成り行きにするスクリプト -EqualHeight.js

サイト構築 -JavaScript

Post on:2014年1月6日

EqualHeight.jsのデモ

デモは、2種類です。
まずは、ベーシックなデモから。

Demo: Basic: 幅1200pxで表示

4つのパネルにそれぞれ異なる量のパラグラフが配置されていますが、パネルの高さを揃えて表示します。

スクリプトをオフにすると、こんな感じになります。

Demo: Basic: スクリプトをオフにした表示

表示幅をタブレットサイズに変更して、段組になっても高さを揃えます。

Demo: Basic: 幅780pxで表示

スマフォサイズにしても、無問題。

Demo: Basic: 幅480pxで表示

スマフォ時のように縦に並んだ場合は高さを揃えさせたくない、という時にはアドバンスドのデモです。

Demo: Advanced: 幅1200pxで表示

デスクトップやタブレットは、ベーシックと同様に高さを揃えます。

Demo: Advanced: 幅780pxで表示

そして、スマフォ時には高さを揃えず、成り行きで表示します。
デモでは、500pxに設定されています。

左: Basic、右: Advanced: 幅480pxで表示

EqualHeight.jsの使い方

Step 1: 外部ファイル

jquery.jsと当スクリプトを外部ファイルとして記述します。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="jquery.equalheight.min.js"></script>

Step 2: HTML

パネルはdiv要素などで実装し、適用するパネル全てをラッパーで包みます。

<div class="Grid--demo">

    <div>
        <p>長いパラグラフ 長いパラグラフ 長いパラグラフ 長いパラグラフ 長いパラグラフ 長いパラグラフ 長いパラグラフ 長いパラグラフ 長いパラグラフ 長いパラグラフ 長いパラグラフ 長いパラグラフ 長いパラグラフ 長いパラグラフ 長いパラグラフ 長いパラグラフ 長いパラグラフ 長いパラグラフ </p>
    </div>

    <div>
        <p>短いパラグラフ</p>
    </div>
</div>

Step 3: JavaScript

適用する要素をjQeuryのセレクタで指定し、スクリプトを実行します。

$(document).ready(function () {
    $('.Grid--demo p').equalHeight();
}

スクリプトのオプションを使用すると、Demo: Advancedのようにスマフォ時には高さを揃えないようにすることもできます。

$(document).ready(function () {

    var equalHeight = $('.Grid--demo p').equalHeight({wait: true});

    // Browser supports matchMedia
    if (window.matchMedia) {

        // MediaQueryList
        var mql = window.matchMedia("(min-width: 500px)");

        // 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();

    }

});