Одинаковая высота блоков является насущной проблемой при разработке дизайна сайта, средствами css это делать не удобно, т.к. требует специальной верстки. Отлично с данной задачей справляется jQuery.

Скрипт EqualHeight

Скрипт для того чтобы динамически сделать одинаковую высоту блоков на странице по самому высокому.

<script type="text/javascript">

$.fn.setEqualHeight = function() {
$this = this;
setTimeout(function() {
var maxHeight = 0;
$this.each(function() {
if (maxHeight < $(this).height()) {
maxHeight = $(this).height();
}
});
$this.each(function() {
$(this).height(maxHeight);
});
}, 1000);
}

$(document).ready(function() {
$(".hentry-box").setEqualHeight();
});

</script>

Нужный для выравнивания блок вписываем в последнюю функцию.
Там где в скрипте прописана цифра (в примере выше 1000) — это временной интервал после которого срабатывает скрипт. Естественно чем быстрее — тем лучше, но иногда нужно «время» чтоб загрузить блоки. И если времени будет недостаточно, то блоки выровнятся не корректно.

На одном из сайтов происходил конфликт с Woocommerce в шаблоне карточки товара (не работала мини-корзина), условием jQuery я его отключил для этого шаблона:

if(!$("div").is(".entry-summary")) {
скрипт EqualHeight
}

Перезагрузка высоты

Если надо на лету перезагрузить высоту блоков, например если мы меняем вид построения постов, то добавляем код

// Перезагрузка высоты блоков при нажатии на кнопки

$( '#btn-block, #btn-line, #btn-photo' ).click(function(){
	  $(".hentry-empty").css("height", "auto");
          $(".hentry-empty").setEqualHeight();
});

// Перезагрузка высоты блоков при изменении размера окна

$(window).resize(function(){
          $(".hentry-empty").css("height", "auto");
          $(".hentry-empty").setEqualHeight();	
});

Одинаковая высота карточек товаров WC

$.fn.setEqualHeight = function() {
    $this = this;
    setTimeout(function() {
      var maxHeight = 0;
      $this.each(function() {
        if (maxHeight < $(this).height()) {
          maxHeight = $(this).height(); 
        }
      });
      $this.each(function() {
        $(this).height(maxHeight);                                
      });
    }, 400);
}
  
$(document).ready(function() {
  $(".products .product").setEqualHeight();
}); 

$(window).resize(function(){
		  $(".products .product").css("height", "auto");
          $(".products .product").setEqualHeight();	
});

Перезагрузка высоты, при переключении табов. Это нужно в случае, если мы реализовали, например, Похожие товары во вкладке.

$('.wc-tabs li').click(function(){
		  $(".products .product").css("height", "auto");
          $(".products .product").setEqualHeight();	
});

Поделиться в соц. сетях: