グルーピングやレスポンシブにも対応した高さを揃えるjQueryプラグイン jquery.matchHeight.js

スクリーンショット 2014-09-08 22.50.11

jquery.matchHeight.jsはコンテンツの高さを揃えるjQueryプラグインです。

よくあるプラグインですが、marginやborderなどのスタイルを考慮してくれたり、レスポンシブデザインにも対応していたりとなかなかに高機能です。

特徴

↓padding, margin, borderなどのスタイルを考慮してくれます。

スクリーンショット 2014-09-08 23.05.25

↓行ごとに高さを揃えることができます。

スクリーンショット 2014-09-08 23.00.08

↓行ごとではなく、全体の高さを揃えることもできます。

スクリーンショット 2014-09-08 23.04.15

↓入れ子にも対応しています。

スクリーンショット 2014-09-08 23.05.13

↓高さを揃える要素を指定することもできます。要素は行をまたいで指定することが可能です。

スクリーンショット 2014-09-08 23.06.37

↓レスポンシブデザインにも対応しています。

スクリーンショット 2014-09-08 23.08.28

基本的な使い方

jQueryと一緒に読み込みます。

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

高さを揃える要素を指定して、matchHeight()を実行します。
デフォルトでは行ごとに高さを揃えてくれます。

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

デモとダウンロード

関連記事

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

コメント

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

  • Posted on
  • Updated on
  • Views 2,810