サイト制作に関するメモ書き

HOME > JavaScript > jQuery > jquery.matchHeight.jsの使い方まとめ

jquery.matchHeight.jsの使い方まとめ

横並びの要素の高さを揃えてくれるjQueryプラグイン「jquery.matchHeight.js」の使い方をメモ。

使い方

jquery.matchHeight.jsは下記からダウンロードできます。
liabru/jquery-match-height · GitHub

HTML内に必要なファイルを読み込みます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="./jquery.matchHeight-min.js"></script>

HTML

横並びにする要素を指定します。

<ul id="sample">
	<li><img src="http://placehold.it/150x150"></li>
	<li><img src="http://placehold.it/150x250"></li>
・
・
・
	<li><img src="http://placehold.it/150x200"></li>
</ul>

CSS

指定した要素を横並びにします。

ul {
	max-width: 960px;
	width: 100%;
	overflow: hidden;
	margin: 0 auto;
}
li {
	float: left;
	width: 150px;
	margin: 5px;
}

JavaScript

$(function() {
	$('#sample li').matchHeight();
});

jquery.matchHeight.jsのデモページ
 

オプションなど

使い方やオプションの詳細はこちらのサイトにありますのでご確認ください。
各設定のデモページ

byRow 行ごとに高さを決めるかどうか指定。
初期値はtrue。
property 高さの設定方法を指定。
値は’height’か’min-height’で、初期値は’height’。
target 一番高い高さを使用するのではなく、指定した要素の高さを使用する。
初期値はnull。
remove 高さ揃えの設定削除。
初期値はfalse。
data-mh="groupname" 要素を指定する代わりに、要素に対してdata属性で「data-mh」を指定することで、同じ値が指定された要素の高さ揃えを行う。
$.fn.matchHeight._update() 要素の高さが変更されたときなど、手動で高さ揃えの更新を行いたいときに使用。
要素の追加や入れ替えを行った場合は、_update()ではなく下の_apply()で再度設定する必要があるっぽい。
$.fn.matchHeight._apply(elements, options) 手動で高さ揃えを適用する。
$.fn.matchHeight._beforeUpdate = function(event, groups) {

}

更新が行われる前に実行。
$.fn.matchHeight._afterUpdate = function(event, groups) {

}

更新が行われた後に実行。
$.fn.matchHeight._throttle = num リサイズなどによる高さの更新が行われるまでの待ち時間?
動作未確認。
初期値は80。
$.fn.matchHeight._maintainScroll = flag リサイズ中や要素追加時などにスクロール位置がずれるのを解消する?
動作未確認。
初期値はtrue。
$.fn.matchHeight._groups 高さ揃えを適用している各グループの要素を配列で取得する。
各グループの要素にアクセスする必要がある場合に使用。

 

【参考サイト】

 

“jquery.matchHeight.jsの使い方まとめ” への1件のコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP