【jquery.matchHeight】レスポンシブにも対応した横並びの要素の高さを揃えてくれるjQueryプラグイン

2016.08.09

横並びになった要素の一番長い高さに合わせて各要素の高さを合わせてくれるjQueryプラグイン

コーディングをしていると、
段組でちょっとテキストの量が測れないことや、
画像の高さが不規則なので段組がずれることがあります。

ちょっと工夫すればCSSでも崩れ自体は解除等はできるのですが、
背景も含んで高さを揃えたい場合や、
サイト全体のイメージとしてどうしても要素の枠の高さを揃えたいといった要望が出てくることがあります。

しかもレスポンシブで。

このレスポンシブでというのが実はちょっとややこしかったりします。
JSで処理を書くのもいいのですが、
こういった処理をするような箇所は実際は一覧ページとか、
同じ要素がダダっと並ぶページになるのでそこまで労力（コスト）をかけることができなかったりします。

そんな時にサクッと実装できてレスポンシブにも対応していて最高に便利なのが、
「jquery.matchHeight」です。

デモも用意されているのでブラウザ枠をゴリゴリとちょっと動かしてみてください。

: レスポンシブにばっちり対応しています

実装方法は簡単で、
まずjQuery本体とダウンロードしたjquery.matchHeight.jsを一緒に読み込みます。

JavaScript：

あとは、
jquery.matchHeightの処理を反映する要素を指定するだけでOKです。

JavaScript：

$(function() {
    $('.list').matchHeight();
});

最高に便利なのですが、
さらにデータ属性を使用してグルーピング（特定の要素郡を指定して高さを変更）することや、
他のオプションも指定することができます。

HTML：


My text
Some other text
Even more text
The last bit of text

JavaScript：

//指定できるオプション
{
    byRow: true,
    property: 'height',
    target: null,
    remove: false
}

しかもですね、
トリガーを指定したり、行を検出したり、コールバックできたり、、、
と至れり尽くせりで、
そんなに労力をかけれないと言っておきながら、
色々といじってしまいそうな仕組みもあって助かります。

普通に指定するだけでも本当に優秀なので、
jquery.matchHeightは本当におすすめです。

参考にしたホームページ・ブログ- I thank for this article. -

-GitHub - liabru/jquery-match-height: a responsive equal heights plugin
https://github.com/liabru/jquery-match-height

← 【PACE】色々なローディングアニメーションのプログレスバーを簡単に実装できるjQueryプラグイン

【jQuery】jQueryを使ってvideoタグで挿入した動画の音声のON・OFFを制御する →