jquery 触发问题

Question

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

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

现场示例在这里链接在这里！（让我知道它是否适合您！）

下面列出了我正在使用的 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();
 }

Answer 2

我做了类似的事情，让自动高度根据类进行匹配...跨浏览器工作，尽管它可能需要更新或plunized。

 function level_it(elem_class)
 {
      var s = 0;
      var t  = 0;
      $('.'+elem_class).each(function(){
      if($(this).height() < s)
      {
         s = $(this).height();
      }
      if($(this).height() > t)
      {
           t = $(this).height();
      }
  });
  $('.'+elem_class).each(function(){
    $(this).height(t);
  });
}
$(document).ready(function(){
  level_it('pricing');
});