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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

jQuery-vertical-ajust плагин

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

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

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

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

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

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

Кнопка "Вверх" с анимацией прокрутки окна

Февраль 16, 2020 г.

Ставший уже привычным элемент навигации внутри страницы - кнопка "Вернуться к началу страницы". Разберем как реализовать эту функцию. План следующий: Создать HTML код кнопки; (БОНУС) Прятать кнопку, если мы и так уже в самом верху страницы. ...

Читать

Обратный порядок перебора элементов jQuery each()

Сентябрь 17, 2019 г.

Полезное ноу-хау для тех кто пользуется jQuery. Функция $.each() производит перебор элементов по порядку, но иногда требуется выполнить операции в обратном порядке. jQuery ничего не предлагает для реализации нашей задачи, но это и не требуется, ...

Читать

Как определить загружен ли определенный плагин для jQuery

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

Возможно ли проверить загружен или нет определенный jQuery плагин? Нет ничего проще! Самый краткий вариант проверки того, определен ли в текущий ...

Читать

Прокрутить HTML документ к заданной позиции

Июль 6, 2018 г.

Рассмотрим как программно установить позицию скролла документа ровно в начале нужного вам HTML контейнера. Чтобы сделать переход плавно, можно использовать функцию jQuery().animate(). Суть процесса такова - вычисляем вертикальную позицию требуемого ...

Читать
 

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

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



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