Урок: блоки одинаковой высоты на jQuery

Задача состоит в том, чтобы все блоки одного типа имели равную высоту.

Есть два правильных способа сделать блоки одинаковой высоты:

1. Сделать блоки со свойством display: table-cell, а их родительский блок со свойством display: table;
2. Воспользоваться JavaScript.

Первый способ сделать блоки одинаковой высоты можно реализовать с помощью CSS, не прибегая к программированию, но второй способ более универсальный.

Способ, когда блоки одинаковой высоты делаются путем явного указания свойства height — плохой, так как не известно какой контент будет помещен в блоки и в случае динамического вывода может получиться так, что содержимое блока больше, чем сам блок, что приведет к тому, что контент вылезет за пределы блока.

Возьмем предыдущий урок и дополним его, исходя из того, что мы выбрали второй путь решения данной задачи. Для решения задачи прибегнем к программированию на JavaScript с использованием библиотеки jQuery.

Возьмем блоки из предыдущего урока.

Как видно блоки имеют разную высоту:

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

Представим, что необходимо выровнять не все дочерние блоки, а только некоторые. Для этого мы должны логически объединить блоки, которые нужно выровнять, например назначить им определенный класс.

Вот как изменился HTML с учетом добавления класса к блоком, которые надо выровнять по высоте:

<div class="parent">
	<div class="child">Текст текст текст текст текст текст</div>
	<div class="child">Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</div>
	<div>Тексттекст текст текст текст текст текст текст текст текст текст текст текст текст</div>
	<div class="child">Тексттекст текст текст</div>
</div>

Теперь необходимо написать функцию, которая будет осуществлять проход по всем «нужным» элементам, вычислять наиболее высокий из них и устанавливать эту высоту для всех этих элементов.

Функция определения большей высоты и установки значения высоты для элементов:

function equalHeight( selector )
{
	var tallest = 0;
	jQuery( selector ).each(function(){
		var thisHeight = jQuery( this ).height();
		if( thisHeight > tallest ){
			tallest = thisHeight;
		}
	});
	jQuery( selector ).height( tallest );
}

В данном примере используется входной параметр функции — selector, который должен содержать селектор, аналогичный тому, как мы пишем в CSS.

Поскольку мы хотим выровнять высоту только тех блоков, которые имеют класс child, то вызов функции будет выглядеть следующим образом.

Вызов функции выравнивания блоков по высоте:

equalHeight( ".parent .child" );

Если необходимо сделать так, чтобы блоки одинаковой высоты были только тогда, когда ширина окна больше какого-то значения, например это актуально в случае просмотра на мобильном устройстве, когда не надо задавать высоту, так как блоки располагаются в один столбец, то надо добавить условие.

Условие выполнения функции выравнивания блоков по высоте:

if( jQuery(window).width() > 300 ){
	equalHeight( ".parent .child" );
}

Высота блоков будет выравниваться, если ширина окна будет больше 300 пикселей.

Результат — блоки одинаковой высоты: