Делал я тут один интернет-магазин. Дизайн, верстка, кодинг… В общем — полный пакет. Для облегчения верстки использовал Bootstrap 3. И застрял я на одном неприятном моменте — на витрине магазина. Витрина по просьбе заказчика версталась в виде сетки из 3 столбцов (по умолчанию для экранов больше 900px по ширине). В каждом столбце — плашка продукта с кратким описанием, названием, ценой, указанием количества для покупки и кнопка добавления в корзину.Всё бы ничего, но вот краткое описание или слишком длинное название продукта делало эти плашки разными по высоте.
И это периодически ломало стройные ряды витрины. Получалось как-то так:
Так дело не пойдет, понял я и отправился серфить просторы на предмет решения. Готового решения для Bootstrap я так и не обнаружил, зато узнал что с версткой колонками и их выравниванием по высоте — дела обстоят хреново. Примерно так же хреново, как раньше было дело со скруглением уголков у прямоугольных элементов.
Однако JavaScript приходит спасителем и несет добро во имя луны. Небольшой код в дополнение к имеющемуся JQuery помог выровнять плашки по высоте в каждой строке.
$(document).ready(function(){ $.fn.equivalent = function (){ var $blocks = $(this), maxH = $blocks.eq(0).height(); $blocks.each(function(){ maxH = ( $(this).height() > maxH ) ? $(this).height() : maxH; }); $blocks.height(maxH); }; $(".shop_item").equivalent(); });
В принципе, тут всё просто. Код ищет элементы с указанным классом shop_item, потом ищет самый высокий и далее меняет размер у всех остальных элементов на максимальный.
Получилось вот так:
Ну я и успокоился на этом. Однако спустя пару дней заказчик посетовал что в Chrome верстка вообще сдыхает при первой загрузке страницы. После перезагрузки или при повторном открытии всё хорошо. Javascript срабатывал коряво :( Получалось как-то вот так:
Это уже совсем никуда не годилось. Мало того что выглядит неприглядно, так еще и функционал нарушается. И я завис с решением. Периодами было желание плюнуть на адаптивность и заверстать витрину в обычную таблицу. Но вскоре решение было найдено. Как оказалось не правильно срабатывал скрипт только в Chrome, даже IE9 и тот верно отрабатывал и показывал всё как положено. А решение оказалось простым. Надо было вешать функцию не на событие готовности страницы, а на загрузку окна. После редактирования скрипт стал выглядеть вот так:
$(window).load(function(){ $.fn.equivalent = function (){ var $blocks = $(this), maxH = $blocks.eq(0).height(); $blocks.each(function(){ maxH = ( $(this).height() > maxH ) ? $(this).height() : maxH; }); $blocks.height(maxH); }; $(".shop_item").equivalent(); });
Ну и, в общем, не зря я хром недолюбливаю. Кажется лавры ишака не дают ему спокойно спать и он всё больше пытается тянуть на себя одеяло. Ресурсы так вообще жрет как не в себя :)