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')

ZayBit/MasonEasy

masonEasy