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 las 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» especialmente 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>.

Dentro de cada <li> pueden ir imágenes, posts o lo que necesites. En cualquier caso te mantendrá la estructura.

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

<head>
<link rel="stylesheet" type="text/css" href="pinterest.css" />
</head>

<div class="mi_galeria_de_fotos">
<ul>
  <li>
  	<img src="https://dummyimage.com/cga">
  </li>
  <li>
  	<img src="https://dummyimage.com/qvga">
  </li>
  <li>
  	<img src="https://dummyimage.com/vga">
  </li>
  <li>
  	<img src="https://dummyimage.com/wvga">
  </li>
  <li>
  	<img src="https://dummyimage.com/wsvga">
  </li>
  <li>
  	<img src="https://dummyimage.com/cga">
  </li>
  <li>
  	<img src="https://dummyimage.com/qvga">
  </li>
<li>
  	<img src="https://dummyimage.com/qvga">
  </li>
  <li>
  	<img src="https://dummyimage.com/vga">
  </li>
  <li>
  	<img src="https://dummyimage.com/vga">
  </li>
  <li>
  	<img src="https://dummyimage.com/wvga">
  </li>
  <li>
  	<img src="https://dummyimage.com/wsvga">
  </li>
<li>
  	<img src="https://dummyimage.com/cga">
  </li>
  <li>
  	<img src="https://dummyimage.com/cga">
  </li>
  <li>
  	<img src="https://dummyimage.com/qvga">
  </li>
  <li>
  	<img src="https://dummyimage.com/vga">
  </li>
  <li>
  	<img src="https://dummyimage.com/wvga">
  </li>
  <li>
  	<img src="https://dummyimage.com/wvga">
  </li>
  <li>
  	<img src="https://dummyimage.com/wsvga">
  </li>
  <li>
  	<img src="https://dummyimage.com/wsvga">
  </li>
</ul>
</div>

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.

.mi_galeria_de_fotos {
  background-color: #eee;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

ul {
  column-gap: 10px;
  column-width: 200px;
  padding: 10px;
  width: 100%;
}

li {
  display: flex;
  padding-bottom: 10px;
}

Aqui puedes ver el resultado en funcionamiento, aunque verás que este ejemplo no es responsive y sólo está optimizado para pantallas grandes , por lo que deberás ajustar el tamaño de la pantalla a cada dispositivo modificando el código necesario en el archivo CSS. Seguro que no será un problema.

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 una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

CAPTCHA ImageChange Image