如何使用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 array
        selector.each(function(){
            var height = $(this).height();
            heights.push(height);
        });

        // Get the biggest height
        var maxHeight = Math.max.apply(null, heights);
        // Show in the console to verify
        console.log(heights, maxHeight);

        // Set the maxHeight to every selected element
        selector.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="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布局：

辅助方法

如果你想使用该库并且想全面了解它, 那么有两种方法值得一提：

触发更新事件

如果你已经在元素中初始化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存储库中的高级用法。

编码愉快！