プラカンブログSTAFF BLOG

2017.02.03

要素の高さを揃える 「jquery.matchHeight.js」を使ってみた

フロートさせた横並びのカラムの高さを揃えたい!ってことはよくあることだと思います。
そしてそのためのJSのライブラリーもたくさん存在しています。
色々あるJSライブラリーの中で、レスポンシブにも対応されてて使いやすそうだったので「jquery.matchHeight.js」を使ってみたので、いつものように備忘録としてブログにしておこうと思います。

使い方

ダウンロード

GitHubの「jquery.matchHeight.js」ページからダウンロードできます。
liabru/jquery-match-height · GitHub

設置方法

HTML

<ul id="sample_box">
   <li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi,   euismod in,   pharetra a,   ultricies in,   diam. Sed arcu. Cras consequat.</li>
   <li>Praesent dapibus,   neque id cursus faucibus,   tortor neque egestas augue,   eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi,   tincidunt quis,   accumsan porttitor,   facilisis luctus,   metus.</li>
   <li>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam,   gravida non,   commodo a,   sodales sit amet,   nisi.</li>
   <li>Pellentesque fermentum dolor. Aliquam quam lectus,   facilisis auctor,   ultrices ut,   elementum vulputate,   nunc.</li>
   <li>Lorem ipsum dolor sit amet,   consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
   <li>Vestibulum auctor dapibus neque.</li>
   <li>Lorem ipsum dolor sit amet,   consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
   <li>Vestibulum auctor dapibus neque.</li>
</ul>

CSS

ul {
    max-width: 960px;
    width: 100%;
    overflow: hidden;
    margin: 0 auto;
}
li {
    float: left;
    width: 200px;
    margin: 5px;
	padding: 5px;
	background: #dddddd;
	list-style: none;
}

ダウンロード1

このような状態だったところにこの「jquery.matchHeight.js」を下記の要領で読み込ませると……

javaScript

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.matchHeight.js"></script>
$(function() {
    $('#sample_box li').matchHeight();
});

と、このように横一列の高さが揃った状態になりました!!

ダウンロード2

あとこの「jquery.matchHeight.js」にはいくつかオプションの設定もあります。

オプション

byRow: true
 行ごとに高さを設定するかどうか。値はtrueかfalseで初期値は【true】。

property: 'height'
 高さの設定。値は’height’か’min-height’で初期値は【height】。

target: null
 カラムの中の最大値の高さを使用せず、特定のカラムの高さを使用することができます。

remove: false
 高さ設定の削除。

あと、他にもデータ属性(data-mh=”group-name”)を指定するとページがロードされるタイミングで同じグループ名のカラムが同じ高さに設定することができたりもします。

<!--データ属性のグルーピング例-->
<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>

詳しくはGitHubの「jquery.matchHeight.js」のオプションを参照

使い方の説明やDEMO、使用ライセンスなどについては下記のページをごらんください。(英語)
本家サイト:brm.io/jquery-match-height
DEMOページ:jquery.matchHeight Browser Tests

 

この記事は、NAGATOMI が書きました。