Masonry, plugin de jQuery para crear columnas adjuntadas

Hace una semana les traía algunos ejemplos del uso de un plugin llamado Masonry, el cuál nos permite hacer varias columnas flotantes sin alterar estructuras, además de que se van adjuntando para poder gastar todo el espacio posible.

Hoy vamos a ver cómo usar Masonry, para crear nuestras propias columnas adaptables, algo así como se fuera un periódico de tabloides, o no sé, muchas cosas se pueden hacer con tantas columnas, así que les dejo el tutorial a continuación, así como un ejemplo de su uso.

Nivel del tutorial: principiantes

Demostración del tutorial

HTML

Lo más importante de este tutorial es tener un contenedor donde van a existir todas las columnas que vamos a tener, en el caso más resumido el código es así:

Tenemos un contenedor de capa y dentro hay más capas que van a servir de columnas, hasta el momento no tiene código ni nada, pero añadan texto e imágenes para ver el resultado.

CSS

Un paso importante es tener nuestros elementos del contenedor como flotantes, para que se puedan manipular dentro de la capa, y el plugin haga su trabajo moviéndolos unos con otros.

En este caso sólo añado el estilo de las columnas, el contenedor no es necesario pero si ustedes quieren adaptarlo a su diseño si van a tener que ponerle estilos al contenedor.

jQuery

Como siempre tenemos que incluir los archivos, el de jQuery para que funcione el plugin, y el archivo del plugin, que pueden descargar aquí

Y como si de magia se tratase lo único que tenemos que declarar después del $(document) es una línea de código para decirle al plugin qué capa es la que tiene que activar.