[JS]異なる高さを単に揃えるだけでなく、グルーピングや列に応じて揃えることも可能な便利スクリプト -matchHeight

高さを揃える系のスクリプトは数多く紹介してきましたが、これはその中でもかなり使い勝手のよく、あーこの機能が欲しかった! というスクリプトです。

コンテンツの量が異なっているのを揃えるのは当たり前、パディングやマージンやボーダーなど異なるスタイルが混在していてもパネルの高さを列に応じて揃えたり、同じ列でも左二つと右二つをそれぞれグルーピングして揃えることもできるjQueryのプラグインを紹介します。
IE8+対応、スマフォにももちろん対応している優れものです。

サイトのキャプチャ

jquery.matchHeight.js
jquery.matchHeight.js -GitHub

jquery.matchHeight.jsのデモ

デモではデフォルトでさまざまなスタイルのパネルが混在して配置されています。

デモのキャプチャ

デモページ:幅1,200pxで表示

パネルは全て同じ高さに揃えるのではなく、その列に応じて高さを揃えます。
この「列に応じて」がポイントです!

そして、レスポンシブにも対応。
表示幅を狭くし、並びが変わると列に応じて揃えているのが分かると思います。

デモのキャプチャ

デモページ:幅780pxで表示

列に一つしか無い場合は、各パネルは成り行きで配置されます。

デモのキャプチャ

デモページ:幅480pxで表示

上部のチェックボックスで各パネルをさまざまなスタイルに変更して、動作を試すことができます。

デモのキャプチャ

デモページ:幅1,200pxで表示

これは、ボーダー無しの状態。

jquery.matchHeight.jsの使い方

Step 1: 外部ファイル

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

<head>
  ...
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  <script type="text/javascript" src="js/jquery.matchHeight.js"></script>
</head>

Step 2: HTML

適用するパネル全てに同じclassを付与します。
各パネルが横一列に配置された場合は、全て同じ高さに。複数の列に配置された場合は各列で一番高いものに揃えます。

<div class="items-container">
  <div class="item">アイテム</div>
  <div class="item">アイテム</div>
  <div class="item">アイテム</div>
  <div class="item">アイテム</div>
  <div class="item">アイテム</div>
  <div class="item">アイテム</div>
  <div class="item">アイテム</div>
  <div class="item">アイテム</div>
</div>

Step 3: JavaScript

各パネル共通で付与したclassをjQueryのセレクタで指定し、スクリプトを実行します。

<script type="text/javascript">
$(function() {
    $('.item').matchHeight();
});
</script>

オプション

オプションではHTML5のdata属性を使い、高さを揃えるパネルをグループ化できます。

<div data-mh="my-group">My text</div>
<div data-mh="my-group">Some other text</div>
<div data-mh="my-other-group">Even more text</div>
<div data-mh="my-other-group">The last bit of text</div>

動作はこんな感じで、同じ列に配置されていても左二つ、右二つで異なる高さになっています。

デモのキャプチャ

デモページ:グループ化のデモ

top of page

©2017 coliss