要素の高さを揃えるjQueryプラグイン「jquery.matchHeight.js」がクソ便利

最近増えてきたカード型レイアウトですが、ちょっとでも文字数が増えたり画像の高さが変わったりしたら高さがズレてしまい、カラム落ちしてしまう...そんな時は「jquery.matchHeight.js」を使ったらあっという間に解決出来ましたぜ。

jquery.matchHeight.jsとは

要素をの高さを揃えるのに特化した軽量jQueryプラグインです。
横一列の要素の中で最も高さが高いものに統一します。カード型の要素を並べるグリッドデザインと非常に相性の良いプラグインです。

タイル上で並べるなら「Masonry」も有名ですが、今回紹介する「jquery.matchHeight.js」はあくまで高さをそろえるだけですのでご注意を。Masonryみたいにレンガ状には出来ません。

ダウンロード

Githubより。

github.com

使用方法

プラグイン読み込み。

<script src="//code.jquery.com/jquery-2.2.1.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.0/jquery.matchHeight-min.js"></script>

高さを揃えたい要素をセレクタに指定し、プラグインを実行させます。
引数でオプションを設定できますが、ただ高さを統一するだけなら何も記述しなくてもおｋ。

<script>
  $(function() {
    $('.item').matchHeight();
  });
</script>

オプションはGithubページにて詳しく書かれています。 コールバックやData API、短い記述で利用できるメソッドも用意されているみたい。

感想

個人的に高さ揃えプラグインの定番だと思います。 実装も簡単だし、困ったときに初心者にも使いやすいんじゃないかな。

おすすめです。