javascript - 使用 javascript 的元素大小 - 在过滤 JSON 数据时需要重新计算高度

Question

var height = $("#mainbody").height();
$("#leftnav").css({"height":height});

$("#leftnav").css({"min-height":height,"padding-bottom":"15px","height":"auto"});

if($.browser.msie && $.browser.version < 7){

    $("#leftnav").css({"height":height});


    $("#leftNavSearch ul li").each(function(){

        if($(this).height() < 20){

            $(this).css({"height":"20px"});

        }else{

            $(this).css({"height":"auto"});

        }

    });     

}else if($.browser.msie && $.browser.version > 7){

    $("#leftnav").css({"height":"auto"});

}

上面的函数计算#mainbody 的高度，#leftnav 与之匹配。

但是，当您过滤页面上的 JSON 数据时，最终会在底部出现大量空白。

选择过滤器链接后重新计算高度的最佳方法是什么？

Answer 1

首先你应该包括 Ben Alman's great throttle plugin ，我们将使用它来限制调用调整大小函数的速率。

接下来我们将您的脚本放入函数中

function resize_left_nav(){
    //YOUR SCRIPT GOES HERE        
}

此后，我们在左侧导航上设置一个自定义事件，我们将触发该事件来调整列的大小。我们使用throttle来限制resize_left_nav函数被调用的速率

$('#leftnav').bind('resize-column',function(){
    $.throttle(250, resize_left_nav);
});

我们希望在两次情况下触发此事件:

• 页面加载

  $(function(){ $('#leftnav').trigger('resize-column'); });

• 当项目列表更新时。当过滤完成后，只需触发该事件即可。

为了稍微清理一下所有内容，我们可以将整个代码包装在 IIFE(立即调用函数表达式)中，如下所示:

(function(){
    function resize_left_nav(){ ... }

    $('#leftnav').bind( ... );

    $(function(){ ... });
})();