Masonry - Layout en cascada

¿Qué es Masonry?

Masonry es una librería de JavaScript que nos permite aprovechar el espacio disponible de una forma inteligente. Funciona colocando los elementos en una posición óptima basada en el espacio libre vertical. Muchas webs ya disponen de esta estructura por lo que te será familiar.

¿Cómo funciona?

Lo primero que tenemos que hacer es descargar los archivos desde la web del autor desde aquí.

Una vez hayamos descargado los archivos, realizaremos la llamada desde nuestra página:

<script src="js/masonry.js"></>

El siguiente paso será crear la estructura. Para que Masonry funcione tenemos que crear una estructura homogénea contenida en una caja principal. A continuación puedes ver un ejemplo:

<div id="container">
<div class="item">...</div>
<div class="item">...</div>
<div class="item">...</div>
</div>

Por último, iniciamos la librería mediante el siguiente código de ejemplo:

var container = document.querySelector('#container');
var msnry = new Masonry( container, {
  // opciones
  columnWidth: 200,
  itemSelector: '.item'
});

Este es un ejemplo básico del funcionamiento de Masonry, si estás interesado en el funcionamiento de esta librería te invito a que descubras por ti mismo las opciones de las que dispone. Más adelante integraremos Masonry y Bootstrap para darle un toque diferente a nuestras webs.