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

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 из 5 (всего 0 оценок)

captcha
Отмеченные звёздочкой поля ( * ) являются обязательными для заполнения.

Спасибо за ваш отзыв!

После нажатия кнопки "Отправить" ваше сообщение будет доставлено мне на почту.

Автор статьи

Артём Мальцев

Веб-разработчик, владеющий знаниями языка программирования Python, фреймворка Django, системы управления содержимым сайта Django CMS, платформы для создания интернет-магазина Django Shop и многих различных приложений, использующих эти технологии.

Права на использование материала, расположенного на этой странице https://vivazzi.pro/ru/it/height-alignment-of-blocks/:

Разрешается копировать материал с указанием её автора и ссылки на оригинал без использования параметра rel="nofollow" в теге <a>. Использование:

Автор статьи: Артём Мальцев
Ссылка на статью: <a href="https://vivazzi.pro/ru/it/height-alignment-of-blocks/">https://vivazzi.pro/ru/it/height-alignment-of-blocks/</a>

Больше: Правила использования сайта

Представляю вашему вниманию книгу, написанную моим близким другом Максимом Макуриным: Секреты эффективного управления ассортиментом.

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

Комментарии: 0

Вы можете оставить комментарий как незарегистрированный пользователь.

Но зарегистрировавшись, вы сможете:

  • получать оповещения об ответах
  • просматривать свои комментарии
  • иметь возможность использовать все функции разработанных сервисов

Для комментирования от своего имени войдите или зарегистрируйтесь на сайте Vuspace

Отправить

На данный момент нет специального поиска, поэтому я предлагаю воспользоваться обычной поисковой системой, например, Google, добавив "vivazzi" после своего запроса.

Попробуйте

Выберите валюту для отображения денежных единиц