Выравнивание блоков по высоте в адаптивных сайтах
23 июля 2016 г. 9:04
Выкладываю свой вариант выравнивания высоты блоков div. Решение однозначно есть лучше... вообще, решений много, но почему-то тот или иной вариант мне не подходил. Пока оставлю свой код здесь, но прежде, чем копировать этот код и попытаться его применить у себя, всё же попробуйте поискать другие варианты, так как этот код - грязный хак :)
$(function(){ function get_max_height($elements){ var max = $elements.eq(0).outerHeight(); $elements.each(function(index){ if (index > 0 && max < $(this).outerHeight()) max = $(this).outerHeight(); }); return max } function set_delay_height(){ // ugly hack for set height var resize_intervals = [100, 200, 1000]; for (var i in resize_intervals){ setTimeout(function(){ $(window).resize(); }, resize_intervals[i]); } } var $cols = $('.cols'); var $col_wr = $cols.find('.col .wr'); /* --- Resize --- */ $(window).resize(function(){ $col_wr.css({'height': 'auto'}); if (window.innerWidth > 767) $col_wr.css({'height': get_max_height($col_wr)}); }).resize(); set_delay_height(); window.addEventListener('orientationchange', function() { $(window).resize(); }); // fix for cms $('.cms-toolbar-item-cms-mode-switcher').on('mousedown.hack_set_height', function(){ set_delay_height(); }); });
Немного комментарий:
1. Хоть мы и используем
$(function(){ ... });
Нет уверенности в том, что при подсчёте максимальной высоты блока, мы получим полностью срендеренные содержимые блоков в колонках. Поэтому нужно дождаться загрузки всего содержимого в колонках, а уж когда это всё дело загрузиться, никто не знает, поэтому существует функция set_delay_height(), которая будет запускать функцию resize() три раза через разные промежутки времени.
2. У меня блоки перестраиваются друг под другом, если ширина экрана меньше 768 пикселей, поэтому в функции resize стоит условие:
if (window.innerWidth > 767) $col_wr.css({'height': get_max_height($col_wr)});
3. Код учитывает смену ориентации устройства:
window.addEventListener('orientationchange', function() { $(window).resize(); });
4. Ну и наконец, добавлен фикс для django cms:
$('.cms-toolbar-item-cms-mode-switcher').on('mousedown.hack_set_height', function(){ set_delay_height(); });
Без него функция установки равной высоты не работает, когда загружаешь страницу, находясь в режиме "Структура". Так происходит, потому что django cms в режиме структура делает для всех плагинов свойство display: none, и когда переключаешься в режим "Содержимое", только тогда у плагинов меняется значение свойства display на inline и все компоненты начинают рендериться.
Ну и напоследок скажу, что можно было бы обойтись без jquery... Но это уже, когда во время рефакторинга дело дойдёт и до этого кода.
Похожие статьи:
Представляю вашему вниманию книгу, написанную моим близким другом Максимом Макуриным: Секреты эффективного управления ассортиментом.
Книга предназначается для широкого круга читателей и, по мнению автора, будет полезна специалистам отдела закупок и логистики, категорийным и финансовым менеджерам, менеджерам по продажам, аналитикам, руководителям и директорам, в компетенции которых принятие решений по управлению ассортиментом.
Комментарии: 0