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

23 июля 2016 г. 5: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 оценок)

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

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

Автор статьи

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

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

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

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

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

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

Чтобы оставить комментарий от своего имени войдите или зарегистрируйтесь обычным способом или через социальные сети:

Отправить

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

Попробуйте