事件后用 Jquery 均衡高度

Question

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

目前，我使用下面概述的 jquery equal heights plugin：

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 的高度设置为 BEFORE rss 提要加载的最高 div 的高度），很可能是因为我需要使用实时事件处理程序？任何人都知道在所有内容完全加载后如何将高度设置为相等？

Answer 1

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

所以只需在每个 AJAX 调用的 success 回调中添加 equalHeight($(".block"));。

$.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
    }
});

---

另外一种更密集但在代码方面更简单的方法是在每次 AJAX 调用后使用ajaxSuccess 运行一个函数：

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