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

Я сделал что-то подобное для автоматического сопоставления высоты в зависимости от класса... работает в кросс-браузерном режиме, хотя, возможно, его придется обновить или удалить.

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