[JS]異なる高さを単に揃えるだけでなく、グルーピングや列に応じて揃えることも可能な便利スクリプト -matchHeight
Post on:2014年3月4日
sponsors
高さを揃える系のスクリプトは数多く紹介してきましたが、これはその中でもかなり使い勝手のよく、あーこの機能が欲しかった！ というスクリプトです。
コンテンツの量が異なっているのを揃えるのは当たり前、パディングやマージンやボーダーなど異なるスタイルが混在していてもパネルの高さを列に応じて揃えたり、同じ列でも左二つと右二つをそれぞれグルーピングして揃えることもできる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>
動作はこんな感じで、同じ列に配置されていても左二つ、右二つで異なる高さになっています。
デモページ：グループ化のデモ
sponsors
