Блоки одинаковой высоты

В качестве разметки будем использовать списки. В каждый элемент li поместим картинку товара и его описание. Фото умышленно взяты разных размеров. Как правило, при наполнении сайта администратор редко задумывается о том, что картинки стоит оптимизировать и заливает их на сайт как есть. Нашей задачей будет отцентрировать картинки и сделать все блоки одинаковой высоты.

<ul>
	<li>
		<div class="img"><span><img src="/img_1.jpg" alt="" /></span></div>
		<span>Классический текст Lorem Ipsum, используемый с XVI века, приведён ниже.</span>
	</li>
	<li>
		<div class="img"><span><img src="/img_2.jpg" alt="" /></span></div>
		<span>Классический текст Lorem Ipsum.</span>
	</li>
	<li>
		<div class="img"><span><img src="/img_3.jpg" alt="" /></span></div>
		<span>Классический текст Lorem Ipsum, используемый с XVI века, приведён ниже. Классический текст Lorem Ipsum.</span>
	</li>
	<li>
		<div class="img"><span><img src="/img_4.jpg" alt="" /></span></div>
		<span>Классический текст Lorem Ipsum, используемый с XVI века.</span>
	</li>
	<li>
		<div class="img"><span><img src="/img_5.jpg" alt="" /></span></div>
		<span>Классический текст Lorem Ipsum, используемый с XVI века, приведён ниже.</span>
	</li>
	<li>
		<div class="img"><span><img src="/img_6.jpg" alt="" /></span></div>
		<span>Классический текст Lorem Ipsum.</span>
	</li>
	<li>
		<div class="img"><span><img src="/img_7.jpg" alt="" /></span></div>
		<span>Классический текст Lorem Ipsum, используемый с XVI века, приведён ниже. Классический текст Lorem Ipsum.</span>
	</li>
	<li>
		<div class="img"><span><img src="/img_1.jpg" alt="" /></span></div>
		<span>Классический текст Lorem Ipsum, используемый с XVI века.</span>
	</li>
</ul>

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

.select_main {
margin:40px auto 0;
width:800px; 
}
ul {
width:100%;
}
li {
margin:0 10px 20px 5px;
padding:10px;
width:160px;
display:inline-block;
vertical-align:top;
*display:inline;
*zoom:1;
border:1px solid #e5e5e5;
}
.img {
width:100%;
height:121px;
text-align:center;
display:table;
position:relative;
}
.img span {
display:table-cell;
vertical-align:middle;
}
.img img {
width:100%;
}

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

$(document).ready(function(){
	var maxH = 0;
	$("li").each(function () {
		var h_block = parseInt($(this).height());
		if(h_block > maxH) {
			maxH = h_block;
		};
	});
	$("li").height(maxH);
});

Сохраняемся, перегружаем страницу и любуемся проделанной работой. Все блоки приняли одинаковую высоту.

Теперь немного подробнее, чего мы тут написали. Объявляем переменную maxH и присваиваем ей значение 0. Далее выбираем все элементы li в каталоге и проходимся по ним в цикле с помощью функции each. В теле цикла мы объявляем еще одну переменную h_block в которой сохраняем значение высоты каждого элемента li, округленного до целого числа с помощью функции parseInt. Все в том же цикле задаем условие - если значение текущего блока больше, чем значение в переменной maxH, то присваиваем последней это значение. Другими словами - мы проверяем высоту каждого блока и наибольшую высоту сохраняем в переменную maxH. И, наконец, пройдясь по всем li и вычислив наибольшую высоту, мы присваиваем ее всем блокам (строка $("li").height(maxH);).

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

Исправить такую ситуацию полностью нельзя (если только не уменьшить объем текста в проблемной лишке), а вот свести недостаток к минимуму вполне возможно.

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

$(document).ready(function(){
	var line = $("li");
	var times = 0, rows = Array(), max = 0;
	line.each(function() {
		if (times == 4) {                
			for (var i = 0; i < rows.length; i++) {
				rows[i].css("height", max);
			}
			max = 0;
			times = 0;
			rows = [];
		}
		if (max < $(this).height()) {
		   max = $(this).height();
		}
		rows[times] = $(this);
		times += 1;
	});
	
	if (times != 0) {       
		for (var i = 0; i < rows.length; i++) {
			rows[i].css("height", max);
		}          
	}
});

Вот собственно и все. Какой из методов применить, решать нужно по ситуации, но в любом случае - второй способ более универсален.

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