ZayBit / MasonEasy

Grid masonry con filtro de elementos responsivo

masonEasy

Grid masonry con la opcion de filtrado elementos responsivo DEMO

configuracion por defecto

tipo	propiedad	por defecto	definicion
string	selector	".item"	clase de los elementos
bool	filter_mode	false	usar el filtrado de elementos
number	scrollWidth	17	ancho del scroll vertical
string	filterControls	".filter-controls"	contenedor de los botones para filtrar
string	currentCategoryClass	"select-category"	clase añadida a los elementos filtrados
number	transition	300	transición de los elementos al moverse

HTML

La estructura dentro del contenedor con la clase "filter-controls" no necesariamente tiene que ser una lista pero si contener el atributo data-category, a su vez los elementos del contenedor con el id "masonEasy" tienen que tener el mismo atributo data-category

   <div class="filter-controls">
        <ul>
            <li>
                <a href="#" data-category="all" class="current-category">All</a>
            </li>
            <li>
                <a href="#" data-category="city">City</a>
            </li>
        </ul>
</div>
<div id="masonEasy">
    <div class="item"  data-category="city">
</div>

CSS

    /* No es necesario importar los estilos css */

JS

masonEasy('masonEasy')