hand Inicio

SERVICIOS

Salir

nochedía

Implementar un grid masonry con React

500 palabras
2 minutos
July 8, 2020

Una distribución masonry de momento no la tenemos de serie con css, con lo que tenemos que o bien utilizar alguna librería, o bien hacer una solución manual

Aquí vamos a explorar la opciones manual con grid

La Técnica Masonry

Distribuir elementos de tipo masonry quiere decir sin ninguna cuadrícula concreta sino ir añadiendo elementos a las columnas más vacías e ir rellenándolas a medida

El efecto es el que consiguen sitios como pinterest

Y por qué no utilizar lo tradicional? Lo máximo que podemos hacer con css-grid es esto

Y un masonry sería esto

Cómo lo hacemos? Con JavaScript en formato React y utilizando css-grid

Vamos allá

  1. La Técnica Masonry
  2. JavaScript con css-grid
  3. Otras opciones en formato librería?

JavaScript con css-grid

Para implementar el masonry con el css-grid se trata de tejer una malla con filas relativamente estrechas, y luego definir cada imagen para que ocupe un número determinado de imágenes

(inspirado en esta implementación)

De momento nos centramos en leer la altura de cada imagen

Con éste código

  • Hemos generado una lista de 20 imágenes con la función (un custom hook) useImages

Este hook simplemente almacena en un useState una lista que genera sólo una vez con useLayoutEffect y que se trata de direcciones distintas de picsum.photos

  • Con useClientRect recogemos las dimensiones de las imágenes que se actualizan una vez se cargan

Utilizamos una función como referencia, esa función la memoizamos con useCallback, y recalculamos la función cuando la imagen se carga

Esto último lo hacemos con un estado load loaded al cual le asignamos un nuevo objeto {} simplemente para cambiarle el estado y forzar la actualización

De momento no hacemos nada excepto imprimir el valor en la consola (si lo miras en el codesandbox recuerda que debes añadir las dependencias @emotion/styled y @emotion/code)

Ahora se trata de utilizar esas dimensiones (sólo nos interesa el height) para asignar un número de filas a esa imagen

Esto lo haremos simplemente dividiendo el height de la imagen por el valor que le damos a cada fila

Esa fila, cuanto más estrecha más precisión pero también más necesidad de cálculo, con lo que es un compromiso

Aquí la definimos de 20px

Y ya lo tenemos

Con este código

  • Una vez tenemos el height de las imágenes, calculamos cuántas filas ocuparía en el grid

Y este valor lo calculamos cada vez que se actualizan las dimensiones mediante un useEffect, y almacenamos el valor en un useState

  • Y pasamos ese valor al componente css para que lo incluya en un grid-row-end: span X

El resto de cambios son para poder definir las variables de forma más cómoda en el código y que después estos se vayan al css, y listos

El único detalle interesante es que he tenido que añadir un <div> extra que antes no estaba entre la imagen y el <CardDiv>

Esto lo he tenido que hacer porque sino no podía medir su height ya que este venía dado por el grid

Con un div intermedio, este div es el que quedaba bloqueado, y la imagen bajo este podía expresar su height con libertad

Por lo demás, sólo faltaría pulir la estética final para centrar los elementos

Por ejemplo, cambiando ligeramente los estilos

Para terminar de esta manera

Otras opciones en formato librería?

Las tienes en esta entrada

🙋‍♂️

Qué tal el curso?
👌 Bien 🙌🙌
👍 Bien, pero algunas cosas podrían explicarse mejor 😬
🤷‍♂️ Da por sentadas demasiadas cosas 😒
🤷‍♂️ A ver, hay poca chicha 😬
🤷‍♂️ Los ejemplos no son muy claros 🙇‍♂️
🤷‍♂️ No se entiende, está mal escrito 👎
✍️ Hay errores, revísalo en cuanto puedas 🙏

Quizá te interese

Privacidad
by kuworking.com
[ 2020 >> kuworking ]