Efecto PINTEREST en nuestras galerías de imágenes.

efecto PINTEREST en galeria de imágenes

Añadir efecto PINTEREST a nuestras galerías de imágenes.

Hoy os traigo la solución a un problema que muchos de los que empezamos en este mundillo nos encontramos cuando diseñamos nuestras webs: la galería de imágenes.

Hemos visto muchas webs que, al añadir sus imágenes o cards de productos, debido a la diferencia de tamaños se muestras de una manera, digamos, poco ordenada.

Esto nos lo solucionó PINTEREST con su curiosa manera de mostrar sus imágenes.

Layout de Pinterest

Como podeis observar, lo que hacen en ajustar el ancho de todas las imágenes manteniendo la proporción. Nuestras fotos se entrelazarán respetando la anchura disponible adaptando el número de columnas a la anchura disponible.

 

muro de pinteres

Es como construir esos viejos muros de ladrillos que, aunque sean de tamaños distintos, se ajustan para no dejar espacios vacíos.

Hay maneras mucho más avanzadas de realizarlo, incluso existe la librería «masonry» esoecielmente creada para ésto, pero yo os presento el sistema más simple que existe. Para empezar os sacará del apuro, pero os recomiendo investigar un poco.

Recuerda que si necesitas crear una galería de imágenes a la que le puedas añadir fotos desde  tu móvil, aqui te explico cómo hacerlo.

Empecemos:

Aqui tenemos el <div class=»mi_galeria_de_fotos»> que es quien contendrá nuestra galería de imágenes. Veréis que he creado una tabla <UL> , y cada imagen la coloco dentro de sus propios <LI>.

Puedes añadir las imágenes de forma manual o automáticamente, eso lo dejo en tus manos. Aquí tienes el código HTML.

Este es el archivo CSS. Recuerda que has de cargarlo desde el archivo HTML.

Verás que <UL> tiene un ancho de columnas de 200px. Puedes modificarlo para adaptarlo a tus necesidades. Puedes añadir muchas opciones de diseño para hacerlo más atractivo a la vista.

Y con estos 2 archivos y algo de tu imaginación, ya tienes disponible una estupenda galería de imágenes al estilo PINTEREST. A partir de aqui, y como digo siempre, se abre un campo infinito de posibilidades. Pero por algo hay que empezar.

 

Compartir esta entrada.

Deja un comentario

Tu dirección de correo electrónico no será publicada.

CAPTCHA ImageChange Image