如何使用jQuery自动使所有高度相同的div列

每个Web开发人员都将面对某天的艰巨任务, 即处理具有不同内容的布局中的列。我的意思是, 我们总是会在互联网上的代码段和演示中看到很棒的模板, 它们看起来简直是棒极了(但是只有相同的内容)：

文章图片
但是, 当我们使用模板时, 我们只是放置了一些由服务器端语言生成的动态内容：

文章图片
它看起来一点也不对称, 不是吗？
你会问自己, 为什么不简单地将CSS用于此任务？好吧, 答案很简单, 仅使用CSS很难或几乎不可能创建用于任意内容的健壮, 反应灵敏的等高列(至少不使用hack或欺骗, 以向后兼容的方式, 是的, 我们正在谈论你的IE9) 。此任务应使用Javascript(或jQuery)完成, 但是请注意, 你可能应确保你的布局仍可供用户使用(请记住可能是禁用了javascript的人)。
如果你决定编写一些脚本来实现所需的功能, 则你可能会在考虑以下方面：
注意：不要使用以下代码段, 因为它太基础了, 它只是说明逻辑如何工作的一个示例。

(function( $ ) {// the sameHeight functions makes all the selected elements of the same height$.fn.sameHeight = function() {var selector = this; var heights = []; // Save the heights of every element into an arrayselector.each(function(){var height = $(this).height(); heights.push(height); }); // Get the biggest heightvar maxHeight = Math.max.apply(null, heights); // Show in the console to verifyconsole.log(heights, maxHeight); // Set the maxHeight to every selected elementselector.each(function(){$(this).height(maxHeight); }); }; }( jQuery ));

那应该创建与jQuery插件相同的Height方法, 因此我们可以像这样使用它：

$('.my-selector').sameHeight(); $(window).resize(function(){// Do it when the window resizes too$('.my-selector').sameHeight(); });

但是我们不建议你自己或使用前面的代码片段来做, 这会花费很多时间进行测试, 相反, 我们建议你为此使用一个库, 如以下区域所示。
实现如果你想自己做, 那么要关心的事情太多了；如果要确保自己的实现真正起作用, 则要执行很多测试。不要重新发明轮子, 而要使用一个库使其变得简单, 实用且正确。在这种情况下, 我们建议你使用jquery.matchheight来实现你的目标。有很多jQuery插件承诺使用完全脚本来使你的div在每个浏览器中具有相同的高度, 但是其中大多数失败, 不是因为用户使用旧的浏览器, 而是因为它们未实现算法调整窗口大小时将元素添加到元素上, 因为你在一行或其他事件(例如DOM修改)中使用浮动元素。
通过使用简单的选择器和初始化函数, MatchHeight将使所有选定元素的高度完全相等。你可以在此页面上看到MatchHeight的演示, 或直接访问Github中的存储库以获取库的副本。 MatchHeight的主要特点是：

它会自动匹配元素组的高度。
使用最大高度或定义特定的目标元素。
页面上任何地方以及DOM中任何地方。
响应式(有关窗口调整大小事件的更新)。
行意识(处理浮动元素和包装)。
用于计算框大小和混合填充, 边距, 边界值。
处理图像和其他媒体(加载后进行更新)。
支持隐藏或不可见的元素(例如, 标签控件中的元素)。
调节以平衡性能和平滑度。
在需要时可以轻松删除。
保持滚动位置。
数据属性API。
回调事件。
在IE8 +, Chrome, Firefox, Chrome Android中进行了测试。

首先, 获取Github存储库中的match-height库的副本, 或将项目作为依赖项添加到NPM中：

npm install jquery-match-height

或使用Bower：

bower install matchheight

最后, 在文档中包含带有脚本标签的库(请注意, 之前需要包含jQuery)：

< script src="http://www.srcmini.com/jquery.matchHeight.js" type="text/javascript"> < /script>

然后, 你将可以使用matchHeight库。你可以将MatchHeight与jQuery或数据属性API结合使用：
jQuery初始化
对于我们的标记, 我们使用引导程序：

< div class="row"> < div class="col-md-4 article" style="background-color:yellow; "> < h2> Article Title< /h2> < p> Hello < br> This has < br> a different height< /p> < /div> < div class="col-md-4 article" style="background-color:blue; "> < h2> Article Title< /h2> < p> Hello < br> < br> < br> This is not what it < br> looks like< /p> < /div> < div class="col-md-4 article" style="background-color:violet; "> < h2> Article Title< /h2> < p> Hello< br> < br> < br> < br> < br> < br> < br> < br> < br> < br> < br> a different height< /p> < /div> < /div>

3个高度不同的列, 为了使它们都具有相同的高度, 请使用jQuery初始化matchHeight(使用article类选择3个元素)：

$(".article").matchHeight();

而且你不必担心元素的高度是否相同, 因为matchHeight会自动处理所有高度。 matchHeight方法可以接收具有4个属性的对象作为第一个参数：

$(".article").matchHeight({byRow: true, property: 'height', target: null, remove: false});

byRow为true或false为启用行检测
property是要设置的CSS属性名称(例如’ height’ 或’ min-height’ )
target是要使用的可选元素, 而不是具有最大高度的元素
remove是true或false是删除以前的绑定而不是应用新的绑定

数据属性API
你可以使用数据属性自动初始化库, 例如data-mh =” group-name” , 其中group-name是任意字符串, 用于标识应将哪些元素视为组(一种组ID)。

< div class="row"> < div class="col-md-4" style="background-color:yellow; " data-mh="article-group"> < h2> Article Title< /h2> < p> Hello < br> This has < br> a different height< /p> < /div> < div class="col-md-4" style="background-color:blue; " data-mh="article-group"> < h2> Article Title< /h2> < p> Hello < br> < br> < br> This is not what it < br> looks like< /p> < /div> < div class="col-md-4" style="background-color:violet; " data-mh="article-group"> < h2> Article Title< /h2> < p> Hello< br> < br> < br> < br> < br> < br> < br> < br> < br> < br> < br> a different height< /p> < /div> < /div> < div class="row"> < div class="col-md-4" style="background-color:yellow; " data-mh="blog-group"> < h2> Blog Title< /h2> < p> Hello < br> This has < br> a different height< /p> < /div> < div class="col-md-4" style="background-color:blue; " data-mh="blog-group"> < h2> Blog Title< /h2> < p> Hello < br> < br> < br> This is not what it < br> looks like< /p> < /div> < div class="col-md-4" style="background-color:violet; " data-mh="blog-group"> < h2> Blog Title< /h2> < p> Hello< br> < br> < br> < br> < br> < br> < br> < br> < br> < br> < br> a different height< /p> < /div> < /div>

加载页面时, 所有具有相同组名的元素都将设置为相同的高度, 而不管它们在DOM中的位置如何, 而无需任何其他代码。
请注意, 使用数据API时将启用byRow, 如果你不希望这样做(或需要其他选项), 请使用替代方法(使用jQuery)。
通过使用前面提到的任何方法, 你应该使用jQuery看到带有列的simetric布局：

文章图片
辅助方法
如果你想使用该库并且想全面了解它, 那么有两种方法值得一提：
触发更新事件 【如何使用jQuery自动使所有高度相同的div列】如果你已经在元素中初始化matchHeight, 并且由于某种原因需要更新Adjust方法, 例如, 如果你修改了某些内容, 则可以使用以下方法进行操作：

$.fn.matchHeight._update()

回调事件由于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}

如果你需要更多信息, 请访问Github存储库中的高级用法。
编码愉快！