0

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

基本上我的问题是 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();
});

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

4

2 回答 2

2

也许在最后一个循环中没有将其包装在 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();
 }
于 2009-09-23T20:14:18.277 回答
1

我做了一些这样的事情来匹配基于类的自动高度......跨浏览器工作，尽管它可能需要更新或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');
});
于 2009-09-23T20:55:11.643 回答