横並びの要素の高さを揃えてくれる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();
});
オプションなど
使い方やオプションの詳細はこちらのサイトにありますのでご確認ください。
各設定のデモページ
| 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 | 高さ揃えを適用している各グループの要素を配列で取得する。 各グループの要素にアクセスする必要がある場合に使用。 |
【参考サイト】
[…] https://cly7796.net/blog/javascript/plugin-jquery-matchheight/ […]