MixItUp: Organización y filtrado de elementos con animación

MixItUp es un interesante propuesta que seguramente interesará a todos aquellos que estén buscando una manera de organizar sus contenidos de forma dinámica, contando con la posibilidad de realizar el filtrado de la información de manera simple y rápida.

Este proyecto se desarrolló como un plugin del framework jQuery, su instalación es muy sencilla y no difiere demasiado de la inicialización de cualquier otro plugin, donde si veremos algunos cambios es en nuestra estructura HTML ya que requiere de algunas consideraciones para funcionar correctamente.

La herramienta permite principalmente hacer dos cosas: filtrar y ordenar contenidos, es una solución magnifica para proyectos como: galerías de imágenes, portfolios, blogs y cualquier otro sitio que necesite de una UI con una fuerte necesidad de visualización dinámica de datos.

MixItUp para funcionar combina la potencia de JavaScript para manipular la información y muchísimas propiedades de CSS para organizar los elementos, aspectos como gestión de porcentajes, media-queries y similares se encuentran perfectamente contemplados en esta iniciativa.

Si hablamos de su instalación, vamos a necesitar de una estructura basada en un div contenedor y divs hijos, estos últimos utilizaran la etiqueta data para identificar el tipo de información contenida para su posterior filtrado. La estructura debería verse así:

<div id="Container">
    <div data-my-order="1"> ... </div>
    <div data-my-order="2"> ... </div>
    <div data-my-order="3"> ... </div>
    <div data-my-order="4"> ... </div>
</div>

Como se puede ver en el ejemplo la etiqueta data-my-order configura la disposición inicial que tendrán las cajas, luego podemos utilizar las clases como parámetro de filtrado.

Los botones que realizan el filtrado se utilizan de la siguiente manera:

<button data-filter=".category-1">Category 1</button>
<button data-filter=".category-2">Category 2</button>

Por ultimo solo resta inicializar el plugin:

$(function(){
    $('#Container').mixItUp();  
});

Como pueden ver es muy fácil organizar y filtrar contenidos con esta herramienta, en el sitio oficial del proyecto pueden ver una demostración completamente funcional.