Вертикальное уплотнение списка скриптом

Если вы занимаетесь версткой, то наверное, нередко верстаете элементы списков. Все выглядит красиво, если элементы однородны по ширине-высоте, тогда они выстраиваются примерно так, как выглядит картинка сверху.

Рассмотрим случаи, когда это не так.

Если у элементов отличается только ширина, то верстка inline-block элементов отлично справляется с таким списком. Блоки прижаты друг к другу и пустоты возникают только с края.

Если неравномерные разрывы справа вас раздражают, то можно применить text-align: justify и получить вот такую картинку:

Уплотнение по вертикали

Что делать в случае блоков разной высоты, если мы хотим избежать пустот между ними по вертикали?

HTML документ верстается построчно, потому для плотной вертикальной верстки придется подготовить отдельные контейнеры для каждого столбца и заполнить столбцы элементами списка.

При этом они перестанут быть элементами единого списка.

Потому, при изменении размеров окна, элементы списка будут оставаться в рамках своего контейнера-столбца. Увеличение ширины окна браузера не приведет к образованию новых столбцов и наоборот. Мы получим фиксированное число столбцов.

Постановка задачи

Хотелось бы иметь и единый список, адаптирующийся под ширину окна, и возможность уплотнения по-вертикали, которое также поддерживалось бы в случае изменения ширины окна.

Вертикальный дрифт

Добиться нужного эффекта я решил с помощью js скрипта. Идея в следующем: нужно задавать смещения каждого элемента списка вверх, пересчитывая их при изменении размеров окна браузера.

Вот как выглядит список после обработки:

Теперь меняем ширину окна, а скрипт пересчитывает отступы:

Сначала я сделал обычный js скрипт, но потом решил оформить код в виде jQuery плагина. Плагин позволяет работать сразу с несколькими списками в документе.

Вот сложный пример работы с 5 списками.

jQuery-vertical-ajust плагин

Код плагина, текст примера и описание работы я выложил на gitHub. Основной момент заключается в следующем:

Элементы списка должны иметь следующие стили — display: inline-block и vertical-align: top.

Чтобы элементы нашего списка начали себя вести соответствующим образом, их нужно инициализировать вызовом функции плагина attach:

где selector — это jquery селектор, например:

Для каждого списка, требуется собственный вызов функции плагина.

Написать комментарий

Мало букафф? Читайте есчо !

Анимация ожидания загрузки/обновления, используя CSS3

Октябрь 26, 2015 г.

Одна из типичных задач для улучшения пользовательского интерфейса на сайтах - это визуализация ожидания загрузки/обновления страницы. Наиболее частый случай ...

Читать

Раздвигающееся вертикальное меню Drupal 6

Сентябрь 7, 2013 г.

Эта задача из разряда useability. Drupal может штатно создавать блоки вертикальных иерархических меню. Неудобным будет тот случай, когда мы хотим попасть на страницу в глубине иерархии этого меню. Нам придется последовательно заходить на родительские ...

Читать

 

Комментарии к «Вертикальное уплотнение списка скриптом»

Понравилась статья? Есть вопросы? - пишите в комментариях.



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