jQuery.matchHeight

GitHub 项目地址 演示

功能

自动匹配元素组的高度，使其同一高度。

引入

<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 访问和修改

转载请注明出处：吖Go博客 » jQuery.matchHeight

功能

引入

用法：

选项：