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

divなどで配置したパネル内の要素の量が異なっていても、全てのパネルの高さを揃えるjQueryのプラグインを紹介します。

高さを揃える系としては後発のスクリプトですが、レスポンシブにしっかり対応しているのがポイントです。
一列のパネルはもちろん、段組でもOK、省スペースのスマフォ用に成り行きもコントロールできます。

デモのキャプチャ

EqualHeight.js -GitHub

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

    }

});

top of page

©2017 coliss