BLOG DE DISEÑO WEB CORUÑA

Un poco de todo, recursos, tutoriales, noticias, anuncios...

Macy, una librería Masonry muy liviana en javascript

17/AGO/2017 1.367 visitas Ver comentarios
Macy, una librería Masonry muy liviana en javascript

ADVERTENCIA: Este artículo tiene más de 6 meses de antigüedad. Puede que esta información ya se encuentre obsoleta o haya nuevas y mejores opciones.

Macy.js es una librería en javascript muy liviana (tan solo 4kb) sin dependencias externas diseñada para ordenar items verticalmente y convertirlos en columnas buscando siempre el mejor layout con el mínimo alto posible.

A estas alturas, todo el mundo conoce la archiconocida librería Masonry. Macy.js viene a ser una librería similar pero con algunas características que la hace más que interesante.

Opciones

container. Default: None
Puedes utilizar esta opción para especificar el contenedor al que se aplicará Macy. Todos los elementos que estén dentro de este contenedor se convertirán en items ordenables.

columns. Default: 4
Define el número de columnas con las que vamos a trabajar. Hay una opción para romper esta configuración en maquetaciones responsive (breakAt).

trueOrder. Default: true
Usando esta opción priorizaremos el alto de cada columna en lugar del orden real que tenían los elementos antes de aplicar el layout.

margin. Default: 0
Ajusta el margen entre columnas con un valor definido en pixels. También puedes aplicar padding a los elementos con reglas CSS estándar.

waitForImages. Default: false
Interesantísimo ya que Macy esperará a que las imágenes estén totalmente cargadas antes de aplicar el layout si ponemos esta opción en true. La gran diferencia con Masonry es que depende de la librería ImagesLoaded para hacer lo mismo.

breakAt. Default: None
Esta opción controlará la cantidad de columnas según el tamaño del viewport, pudiendo indicar puntos de corte en los tamaños que nos interese, modificando la cantidad de columnas, espacio entre ellas, etc...

Si ya usabas Masonry, seguramente Macy te gustará y si la pruebas, no olvides comentar en este artículo qué te ha parecido. Nosotros la probaremos en breve.

Puedes ver y descargar Macy desde este enlace.

Código 1 - JAVASCRIPT
var macy = Macy({
    container: '#macy-container',
    trueOrder: false,
    waitForImages: false,
    margin: 24,
    columns: 6,
    breakAt: {
        1200: 5,
        940: 3,
        520: 2,
        400: 1
    }
});

Acerca del Autor...

Macadia, es una agencia de Diseño Web Coruña, especializada en maquetación css y desarrollo de páginas web a medida con más de 20 años de experiencia en el desarrollo de páginas web profesionales. Si te ha gustado este artículo, por favor, ayúdanos a difundirlo compartiéndolo con tus amigos y contactos en las distintas redes sociales que utilices. ¡Muchas gracias!

Los comentarios han sido desactivados momentaneamente a la espera de que Disqus adapte su plataforma a la próxima RGPD que entra en vigor desde el 25/05/2018