Cómo crear una galería de imágenes estilo Pinterest

A veces las mejores soluciones son de hecho las más sencillas de implementar. Y es que estaba buscando una forma de crear un efecto Pinterest con las típicas tarjetas amontonadas que parece que sin importar su altura se acomodan perfectamente unas con otras sin dejar espacio, pensé en todas las posibles soluciones hasta que se me ocurrió hacerlo con CSS y unas dos o tres líneas de código.

En este tutorial vamos a ver cómo crear una galería de imágenes estilo Pinterest, donde tendremos montones de imágenes a nuestro alrededor sin una alineación horizontal aparente. El resultado es a base de un simple pensamiento de lógica pero es lógico que de alguna forma los plugins que nos permiten implementar el efecto usan esto a nivel de jQuery.

Demo del tutorial

Estructura

El HTML es de lo más sencillo, basta definir cinco capas (para tener 5 columnas) y dentro de ellas las imágenes que queremos presentar.

CSS

Ahora, lo único que tenemos que hacer es alinear nuestras capas verticalmente, de tal modo que las imágenes continúen hacia abajo, creando el efecto de Pinterest de tener imágenes con varias alturas pero que curiosamente no hay un espacio en blanco como lo haríamos si pusiéramos todas las imágenes en una sola capa.

Ahora, yo le aumenté un zoom-out para que se vea más llamativo el hecho de que vemos la galería de imágenes, es opcional, pero igual lo pueden poner si quieren. Lo mejor de todo es que si se fijan el tutorial tiene responsive design, básico pero lo tiene.

¿Qué te pareció el tutorial?