Easy List Splitter es uno de esos plugins que a veces nos llegan del cielo. Seguramente más de una vez te habrá pasado que necesitas dividir o separar una lista en diferentes columnas, y la única solución es trabajar,como siempre con CSS.

Easy List Splitter Crear multiples columnas de una misma lista

Este pequeño plugin se encarga de hacer trabajo por nosotros, es decir creara la cantidad de columnas que se le indiquen devolviendo un código HTML valido y sin necesidad de añadir o modificar nuestro hoja de estilo, es decir no se añaden ningún tipo de elemento innecesario o elemento inline.

Caracteristicas

  • Crea columnas a partir de listas ordenadas (<ol>) y desordenadas (<ul>)
  • Podemos definir la cantidad de columnas en las que se dividirá la lista
  • Todo lo referido al CSS es independiente del plugin (fácil de controlar)
  • Se añade un class last al ultimo <ol> o <ul> para controlar el padding o margin
  • Podemos ordenar nuestras columnas vertical u horizontalmente

Uso

Como lo mencione anteriormente, su uso es de lo mas sencillo, por ejemplo podemos tener este markup:

<ul class="my-list">
	<li><a href="#">Lorem ipsum 1</a></li>
	<li><a href="#">Donec pede 2</a></li>
	<li><a href="#">Fringilla vel 3</a></li>
	<li><a href="#">Eget arcu 4</a></li>
	<li><a href="#">In enim 5</a></li>
	<li><a href="#">Lorem farem 6</a></li>
</ul>

Para dividir nuestra lista en tres columnas diremos:

$('.my-list').easyListSplitter({ colNumber: 3 });

Lo que nos mostrar esta nueva lista

list item 1      list item 4      list item 7
list item 2      list item 5      list item 8
list item 3      list item 6

Por defecto la alineación es vertical, si necesitamos lograr una alineación horizontal, escribiremos:

$('.my-list').easyListSplitter({ 
   colNumber: 3, 
   direction: 'horizontal' 
});

Lo que se vera reflejado como:

list item 1      list item 2      list item 3      list item 4
list item 5      list item 6      list item 7      list item 8

Hermoso, no?

En el site del plugin encontraras algunos ejemplos más, junto con toda la documentación necesaria para que puedas implementar este plugin en tu diseño