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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

jQuery-vertical-ajust плагин

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

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

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

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

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

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

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

Ajax в Drupal 7

Август 31, 2015 г.

Расскажу про использование техники ajax в рамках движка Drupal. Начнем с теоретических моментов. Во-первых, чтобы получить какие то данные с веб-сайта под Drupal, нужно чтобы соответствующий адрес существовал на сайте. Во-вторых, нам не хотелось бы ...

Читать

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

Апрель 22, 2016 г.

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

Читать

 

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

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



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