一个响应式等高插件
Posted
tags:
中文标题：一个响应式等高插件 原文标题：a responsive equal heights plugin 项目评级：Star:3100 Fork:823 下载地址：https://github.com/liabru/jquery-match-height 详情介绍jquery.matchHeight.js查询高度
matchHeight使所有选定元素的高度完全相等
brm.io/jquery-高度匹配
演示-功能-库-安装-用法-选项-数据API
高级用法-测试-已知限制-更改日志-许可证
演示
请参阅jquery.matchHeight.js演示。
现代浏览器
自这个库最初开发以来的几年里，CSS一直在更新，现在可以在许多情况下达到同等的高度。如果您只需要支持现代浏览器，那么可以考虑使用CSS Flexbox和CSS Grid。
特征
陈列室
查看其他人是如何使用jquery.matchHeight.js的
安装
jQuery是必需的，所以请先包含它。
下载jquery.matchHeight.js并将脚本包含在HTML文件中：
<script src="jquery.matchHeight.js" type="text/javascript"></script>
您也可以使用包管理器Bower和NPM进行安装。
bower install matchheight
npm install jquery-match-height
用法
$(function()
$('.item').matchHeight(options);
);
其中options为可选参数。
有关可用选项和默认值的描述，请参见下文。
上例将所有类别item的选定元素设置为最高的高度。
如果项目在多行上，则每行的项目将设置为该行中最高的项目（请参见byRow选项）。
在DOM就绪事件上调用此函数（插件将在窗口加载时自动更新）。
有关许多工作示例，请参阅包含的test.html。
另请参阅下面的数据API，了解简单的替代内联用法。
选项
默认options为：
byRow: true,
property: 'height',
target: null,
remove: false
哪里：
数据API
使用数据属性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中的位置如何，而不需要任何额外的代码。
请注意，使用数据API时将启用byRow，如果您不想这样做（或需要其他选项），则使用上述替代方法。
高级使用
您应该了解一些其他函数和属性：
手动触发更新
$.fn.matchHeight._update()
如果您需要手动触发当前设置的所有组的更新，例如，如果您修改了一些内容。
行检测
您可以通过设置byRow选项来切换行检测，该选项默认为true。
也可以在任何时候使用行检测功能：
$.fn.matchHeight._rows($('.item'));
它将为每一行返回一个元素选择数组，有关更多信息和示例，请参阅本线程。
删除绑定
$('.item').matchHeight( remove: true );
这将从所有组中删除选定元素的所有绑定。
自定义目标元素
$(function()
$('.item').matchHeight(
target: $('.sidebar')
);
);
将所有选择的元素设置为类sidebar的第一个项目的高度。
自定义属性
$('.item').matchHeight( property: 'min-height' );
这将设置min-height属性，而不是height属性。
回调事件
由于matchHeight会自动处理某些窗口事件后的布局更新，因此如果需要通知您，您可以提供函数作为全局回调：
$.fn.matchHeight._beforeUpdate = function(event, groups)
// do something before any updates are applied
$.fn.matchHeight._afterUpdate = function(event, groups)
// do something after all updates are applied
其中event一个jQuery事件对象（如load、resize、＜12.26＞），groups是对$.fn.matchHeight._groups的引用（见下文）。
手动应用匹配高度
$.fn.matchHeight._apply(elements, options)
如果您希望避免自动更新功能，请直接使用应用功能。
限制调整大小更新
$.fn.matchHeight._throttle = 80;
默认情况下，_update方法被限制为以每80ms一次的最大速率执行。
减小上述_throttle属性将更快地更新布局，在调整大小时看起来更平滑，但会以牺牲性能为代价。
如果在调整大小过程中遇到滞后或冻结，则应增加_throttle属性。
维护可控硅
oll位置
$.fn.matchHeight._maintainScroll = true;
在页面大小动态变化的某些情况下，例如在调整大小或添加新元素时，浏览器错误会导致页面滚动位置意外变化。
如果您观察到这种行为，请使用上面的行自动尝试强制保持滚动位置（大约）。这是一个全局设置，默认情况下为false。
访问当前组绑定
$.fn.matchHeight._groups
包含已应用matchHeight的所有元素组的数组。内部用于自动更新调整大小事件，但如果需要手动访问任何组（例如，如果要删除元素），则可以修改此数组。
测验
在浏览器中打开test/page/test.html，通过jasmine测试运行程序运行单元测试。
如果您希望为该项目贡献功能，我们鼓励您按照相同的约定添加新的测试。
运行gulp test，通过selenium自动在多个浏览器和多个分辨率上运行单元测试。
运行gulp test:cloud通过云服务在更多浏览器上进行测试（您需要使用您的云凭据创建一个名为test/conf/private.conf.js的文件，如下所示：
exports.config =
user: 'username',
key: 'key'
;
该项目的云浏览器测试由BrowserStack（开源免费）提供。
已知限制
不支持CSS转换和动画
您应该确保没有任何过渡或其他动画会延迟正在匹配的元素的高度更改，包括任何transition: all的规则。否则，插件将产生意想不到的结果，因为动画无法计算在内。
延迟的网页字体可能导致高度不正确
有些浏览器在启动窗口加载事件之前不会等待webfont加载，因此，如果字体加载太慢，插件可能会产生意外结果。
如果这是一个问题，您应该在使用类似webfontloader脚本的东西加载字体后调用_update。
内容更改需要手动更新
如果更改已应用matchHeight的元素内部的内容，则必须手动调用$.fn.matchHeight._update()。这将更新当前设置的所有等高组。
还要注意，以前的matchHeight绑定不适用于新元素，即使它们与所使用的选择器匹配。在这种情况下，您必须删除旧的绑定并添加新的绑定，请参阅此注释。
变更日志
要查看最新版本中的新增内容或更改内容，请参阅更改日志
许可证
jquery.matchHeight.js是根据麻省理工学院许可证（MIT）获得许可的
版权所有（c）2014 Liam Brummitt
此许可证还随发行版和源代码一起提供。
如许可证中所述，绝对不提供任何担保。