АutoСоlumnList — jQuery-плагин для разделения списков на колонки

Для текущего проекта понадобился плагин для jQuery, который бы разделял список элементов на колонки. Да, есть несколько плагинов, которые это умеют, однако все они не подошли по тем или иным причинам. В результате, написал свой, заодно узнал как писать плагины для jQuery.

Самый лучший плагин такого типа это, пожалуй, Columnizer. Он предназначен, прежде всего, для разделения контента на колонки. То есть, основным приоритетом в нем является равная высота содержимого. А вот со списками у него получается намного хуже: зачастую данные размещены неравномерно, иногда появляются пустые колонки.

С другими плагинами совсем не сложилось, все они были намного хуже. В общем, написал свой, о чем сейчас и расскажу.

Основная идея: колонки должны быть примерно равные по высоте, т.е. во всех колонках (возможно, кроме последней) должно быть равное количество элементов.

Разметка простая, самое важное — это список:

Далее, в разделе head страницы нужно подключить стили и скрипты:

И ниже вызов обработчика с параметрами:

Плагин принимает 3 параметра:

  • columns — количество колонок, на которое нужно разделить список
  • classname — класс, который нужно присвоить колонке, возможно указать несколько классов через пробел
  • min — минимальное количество элементов в столбце

Если не указывать никаких параметров, то по-умолчанию количество колонок 4, класс — column, min — 1.

Все оформление через стили, так что какими будут списки зависит только от ваших потребностей. Плагин одинаково работает как с OL, так и с UL списками. Тестировался в IE6+ и современных версиях Firefox, Opera, Chrome. Думаю, что и в других версиях проблем быть не должно.

Учитывайте тот факт, что браузеры по-разному обрабатывают нумерованные списки. Например, IE и Opera разделяют нумерацию для каждой колонки, а Firefox и Chrome ведут общую для всего списка.

Changelog

  • 26/02/2017 — Версия 1.2.0 — Добавлена поддержка data-параметров, поддержка gulpjs, небольшие исправления.
  • 25/07/2014 — Проект перенесен на GitHub.
  • 29/03/2011 — Версия 1.0.2 Небольшая оптимизация кода, добавлена поддержка нескольких селекторов, для последней колонки добавляется класс last. Спасибо Михаилу Кобзареву за помощь в разработке.
  • 28/01/2011 — Версия 1.0.1 Добавлена опция для задания минимального количества элементов в колонке. По-умолчанию, один элемент. Например:
  • 05/01/2011 — Вышла версия 1.0

Смотрите ДЕМО или скачайте архив на GitHub.

Буду рад узнать ваше мнение и критику.