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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

jQuery-vertical-ajust плагин

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

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

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

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

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

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

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

Jquery перебор элементов

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

С помощью селектора jQuery мы выбрали какие то элементы. Как теперь организовать их перебор в цикле? Есть пара вариантов. Используем функцию $.each(func) Разработчики не могли не заложить перебор по найденным элементам в библиотеку. Параметром должна ...

Читать

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

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

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

Читать

 

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

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



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