功能
自动匹配元素组的高度,使其同一高度。
引入
<script src="https://cdn.jsdelivr.net/gh/liabru/jquery-match-height@master/jquery.matchHeight.js"></script>
用法:
$(function() {
$('.item').matchHeight(options);
});
选项:
默认options值为:
{
byRow: true,
property: 'height',
target: null,
remove: false
}
byRow 是 true 或 false 启用行检测
property 是要设置的 CSS 属性名称(例如 'height' 或 'min-height')
target 是要使用的可选元素,而不是具有最大高度的元素
remove 是 true 或 false 删除以前的绑定,而不是应用新的绑定
byRow 行检测:
<div class="row1">
<div class="item">display row1 <br> display row2</div>
<div class="item">display row1</div>
</div>
<div class="row2">
<div class="item">display row1 <br> display row2 <br> display row3</div>
<div class="item">display row1</div>
</div>
当值为 true 时,表示在行内同级的元素起作用,row1 下的两个子元素高度相同,row2 下的两个子元素相同
当值为 false 时,row1 和 row2 下的所有元素高度都相同,这就是行检测与否的区别
当需要切换行检测功能时,可使用函数:
$.fn.matchHeight._rows($('.item'));
data 属性:
使用 data 属性 data-mh="group-name"
,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>
当加载页面时,所有具有相同组名的元素都将会自动设置为相同的高度,不管它们在DOM中的位置如何,都无需附加任何代码
但是需要注意的是,使用 data 属性时,byRow 的默认值为 true,如果想自定义设置,只能使用函数操作
手动触发:
$.fn.matchHeight._update()
当做了某些属性修改之后,可通过手动更新
取消匹配:
$('.item').matchHeight({ remove: true });
还原成原有的属性
自定义目标元素:
$(function() {
$('.item').matchHeight({
target: $('.sidebar')
});
});
将元素组的属性设置成目标元素的高度
自定义属性:
$('.item').matchHeight({ property: 'min-height' });
这将设置 min-height 属性而不再是 height 属性。
回调事件:
由于 matchHeight 在某些窗口事件之后会自动处理布局的更新,因此如果需要通知您,则可以提供函数作为全局回调:
$.fn.matchHeight._beforeUpdate = function(event, groups) {
// 更新之前,处理一些事
}
$.fn.matchHeight._afterUpdate = function(event, groups) {
// 更新之后,处理一些事
}
其中 event 一个 jQuery 对象(如load,resize,orientationchange),groups 包含所有已被 matchHeight 应用元素组的数组,也可通过 $.fn.matchHeight._groups
访问和修改