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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

jQuery-vertical-ajust плагин

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

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

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

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

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

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

Управление размерами autocomplete ui widget в Drupal

Октябрь 25, 2023 г.

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

Читать

Ищем видимые элементы, используя jQuery

Апрель 22, 2016 г.

В CSS такого селектора нет, в вот jQuery предоставляет. Впрочем, нужно понимать, какие объекты jQuery считает видимыми, а какие наоборот -невидимыми. К примеру, видимым будет считаться и объект с visiblity: hidden и объект с opacity: 0. Они хоть ...

Читать

Делаем эффект параллакса для заднего фона на сайте

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

Очень простая мулька, но выглядит при соответствующем фоне потрясающе. Сделаем так, чтобы при скроллинге страницы, фон двигался вдвое медленнее, создавая что то вроде эффекта параллакса. Этот кусочек скрипта привязывает нас к событию onscroll окна. ...

Читать

jQuery плагин для ввода диапазона значений

Февраль 22, 2017 г.

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

Читать
 

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

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



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