Выравнивание элементов в колонках по высоте

Делал я тут один интернет-магазин. Дизайн, верстка, кодинг… В общем — полный пакет. Для облегчения верстки использовал Bootstrap 3. И застрял я на одном неприятном моменте — на витрине магазина. Витрина по просьбе заказчика версталась в виде сетки из 3 столбцов (по умолчанию для экранов больше 900px по ширине). В каждом столбце — плашка продукта с кратким описанием, названием, ценой, указанием количества для покупки и кнопка добавления в корзину.Всё бы ничего, но вот краткое описание или слишком длинное название продукта делало эти плашки разными по высоте.

И это периодически ломало стройные ряды витрины. Получалось как-то так:

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

Однако JavaScript приходит спасителем и несет добро во имя луны. Небольшой код в дополнение к имеющемуся JQuery помог выровнять плашки по высоте в каждой строке.

В принципе, тут всё просто. Код ищет элементы с указанным классом shop_item, потом ищет самый высокий и далее меняет размер у всех остальных элементов на максимальный.

Получилось вот так:

2Ну я и успокоился на этом. Однако спустя пару дней заказчик посетовал что в Chrome верстка вообще сдыхает при первой загрузке страницы. После перезагрузки или при повторном открытии всё хорошо. Javascript срабатывал коряво :( Получалось как-то вот так:

3

Это уже совсем никуда не годилось. Мало того что выглядит неприглядно, так еще и функционал нарушается. И я завис с решением. Периодами было желание плюнуть на адаптивность и заверстать витрину в обычную таблицу. Но вскоре решение было найдено. Как оказалось не правильно срабатывал скрипт только в Chrome, даже IE9 и тот верно отрабатывал и показывал всё как положено. А решение оказалось простым. Надо было вешать функцию не на событие готовности страницы, а на загрузку окна. После редактирования скрипт стал выглядеть вот так:

Ну и, в общем, не зря я хром недолюбливаю. Кажется лавры ишака не дают ему спокойно спать и он всё больше пытается тянуть на себя одеяло. Ресурсы так вообще жрет как не в себя :)

Автор: Mirivlad

Скромный труженик консоли и окошек.