事件后使用 Jquery 均衡高度

Question

我正在开发一个可以解析 RSS 提要并将其显示在一系列 div 中的网站。加载所有提要后，我想运行一个 jquery 函数，该函数基本上获取最高 div 的高度并将所有 div 设置为等于该高度。您可以在这里查看该网站： http://vitaminjdesign.com/adrian/

目前，我使用 jquery < a href="http://www.cssnewbie.com/equal-height-columns-with-jquery/" rel="nofollow">等高插件概述如下：

function equalHeight(group) {
    var tallest = 0;
    group.each(function() {
        var thisHeight = $(this).height();
        if(thisHeight > tallest) {
            tallest = thisHeight;
        }
    });
    group.height(tallest);
}

您可以使用以下方式调用它：

$(document).ready(function() {
$(".block").equalHeights(); 
});

这是无法正常工作（它将所有 div 的高度设置为等于 rss feed 加载之前最高的 div 的高度），很可能是因为我需要使用实时事件处理程序？有人知道在所有内容完全加载后如何将高度设置为相等吗？

Answer 1

当 AJAX 完成时，您需要调用 equalHeight。您有两种选择：(a) 在每个项目加载后进行调用，或 (b) 在所有项目加载后进行一次调用。 equalHeight 看起来并不占用大量资源，因此您不妨每次都进行调用。

因此，只需将 equalHeight($(".block")); 添加到每个 AJAX 调用的 success 回调中即可。

$.ajax({
    url: 'someurl.rss',
    success: function(){
        // your code to insert the relevant content

        equalHeight($(".block")); // insert this at the end of each call to the RSS files
    }
});

---

或者，稍微更密集，但在代码方面更简单，是使用 ajaxSuccess 在每次 AJAX 调用后运行一个函数：

$(document).ajaxSuccess(function(){
    equalHeight($(".block"));
});