Question

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

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

Answer 2

我做了类似的事情，因为自动高度可以根据类进行匹配...跨浏览器工作，但可能需要更新或插入。

 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');
});

jquery解雇问题

2 个答案: