jQuery：jQueryプラグイン「matchHeight.js」で横並びにした要素の高さを揃える

だま
だま

横並びにした要素の高さを自動的に揃えてくれるjQueryプラグイン「matchHeight.js」の使い方メモです。

最近はCSS3のflexboxプロパティで簡単に高さを揃える事ができますが、何らかの理由で使用できない場合はこの「matchHeight.js」が役立ちます。

使い方

  1. floatやinline-block等で横並びにした要素を用意します。classは任意で。 
    <ul class="matchHeightList">
  <li class="listItem">ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。</li>
  <li class="listItem">ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。</li>
  <li class="listItem">ダミーテキストです。</li>
  <li class="listItem">ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。</li>
</ul>

    matchheightjs01.png

    この段階では高さがバラバラですね。
  2. matchHeight.jsのGitHubに移動し、zipファイルをダウンロード

    matchHeight.js GitHubページ（外部リンク）

  3. zipファイルを解凍し、「jquery.matchHeight.js」をhtmlに読み込みます。 
    <script src="js/jquery-1.12.4.min.js"></script>
<script src="js/jquery.matchHeight-min.js"></script>
    または、CDNで読み込み。 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.2/jquery.matchHeight-min.js"></script>
  4. 最後にjQueryを書きます。 
    <script>
  $(function() {
    $('.listItem').matchHeight();
  });
</script>

すると...

matchheightjs02.png

やったー！

レスポンシブ対応なので、ウインドウ幅が変わっても問題ありません。

デモページを用意したのでぐにぐに動かしてみてください。

デモページ

オプション

上記ではclassを指定していますが、data-mh属性を使用する事で高さを揃えるブロックをグループ化する事ができます。

matchheightjs03.png

こちらはjQueryを記述する必要はなく、プラグイン本体の読み込みとdata-mh属性の記述のみで動作します。

このパターンもデモページに設置しているので、参考にしてみてください。

<ul class="matchHeightList">
  <li data-mh="listItem01">グループ01><br>ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。</li>
  <li data-mh="listItem01">グループ01><br>ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。</li>
  <li data-mh="listItem02">グループ02><br>ダミーテキストです。</li>
  <li data-mh="listItem02">グループ02><br>ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。</li>
</ul>

関連記事