jquery 触发问题

Question

我正在使用一个函数来均衡从数据库返回的 li 标签的高度。我还使用 jquery 根据它们在一行中的位置分配某些 li 新类。

基本上我的问题是 jquery 语句的定位部分总是有效，但等高部分有时不会触发，事实上它通常在空缓存上不起作用 - 但是它总是会在刷新或第二次访问时触发到页面。

此处为实例 Link here! (让我知道它是否适合你!)

下面列出了我使用的 jquery 代码。

    jQuery.fn.equalCols = function(){
    //Array Sorter
    var sortNumber = function(a,b){return b - a;};
    var heights = [];
    //Push each height into an array
    $(this).each(function(){
        heights.push($(this).height());
    });
    heights.sort(sortNumber);
    var maxHeight = heights[0];
    return this.each(function(){
        //Set each column to the max height
        $(this).css({'height': maxHeight});
    });
};

jQuery(document).ready(function($) {
        $(".thumbs").each(function(i) { 
        if (i % 4 == 0) 
           $(this).addClass("start");
        if (i % 4 == 3) 
           $(this).addClass("end");
    });
    $(".thumbs").each(function(i) { 
        if (i % 3 == 0) 
           $(this).addClass("start");
        if (i % 3 == 2) 
           $(this).addClass("end");
           });
    $(".event_thumbs").each(function(i) { 
        if (i % 2 == 0) 
           $(this).addClass("start");
           });
$('.thumbs, .end, .start').equalCols();
});

如果你对实现目标的代码或方法有更好的建议，请大声说出来，或者如果你知道如何让它工作 - 我爱你。

Answer 1

也许是因为在最后一个循环中没有将它包装在 jQuery 中？此外，您只需要跟踪迭代时看到的最大值。将高度放入数组中并对其进行排序似乎效率低下。

jQuery.fn.equalCols = function(){
    var maxHeight = 0;
    $(this).each(function(){
        var height = $(this).height();
        if (height && height > maxHeight) maxHeight = height;
    });

    return $(this).each(function(){
        //Set each column to the max height
        $(this).css({'height': maxHeight});
    });
};

更新:因为页面上有图片，等到文档加载完成是不够的，还需要等到图片加载完成。或者，更好的是，在加载每张图像后简单地进行均衡——这样您就可以确定在所有图像加载后都这样做。由于如果图像在应用之前加载(例如，它可能在用户的缓存中并且加载速度比 javascript 执行速度更快)，则不会调用加载处理程序，因此设置一个计时器以在指定的时间后触发 equalCols 函数涵盖未为任何图像调用加载处理程序的情况的时间量。将负载处理程序留在图像上，然后如果您将源更改为图像，它将被重新应用并且页面再次均衡。

 $(function() {
     $('img').load( function() { /* equalize after every image load */
          equalize();
     });
     setTimeout( equalize, 2000 );  /* wait 2 secs, then equalize */
 });

 function equalize() {
     $('.thumbs, .end, .start').equalCols();
 }