Implémentation d'une grille CSS d'images dynamiques de type Pinterest dans React

Question

J'essaie donc d'utiliser CSS Grid pour créer une galerie d'images de type Pinterest. Ainsi, des images de différentes hauteurs peuvent être côte à côte et chaque image peut occuper un espace vide. Mais tous les exemples que j'ai vus ajoutent différentes classes sur chaque image en fonction de la hauteur souhaitée, alors que je souhaite ajouter des images dynamiquement à partir de la base de données.

J'ai essayé ceci :

<div className=‘gallery’>
<img className=‘image’> </img>
<img className=‘image’> </img>
<img className=‘image’> </img>
<img className=‘image’> </img>
</div>

Mon fichier CSS :

.gallery{
max-width: 80vh;
display: grid;
grid-template-columns:repeat(3,1fr);
}

.image{
max-width: 200px;
height: 100%;
object-fit: cover;
}

Mais donc les petites images sont sur la même rangée et les grandes images sont sur une autre rangée, et je veux qu'elles soient aléatoires.

Existe-t-il un moyen d'y parvenir sans ajouter une classe différente pour chaque image ?

Answer 1

Pinterst utilise l'alignement vertical. Ainsi, si vous souhaitez le dupliquer, vous devez créer des cases verticales adjacentes et ayant une largeur fixe. et affichez autant de lignes que la taille de l'écran. (Si vous redimensionnez la fenêtre Pinterest, la page entière sera régénérée, mais cela sort du cadre de votre question, je suppose) Je recommande donc d'utiliser un div ou même un tableau avec une seule ligne et une longue colonne.

<table>
  <tr>
    <td>图片</td>
    <td>图片</td>
    <td>图片</td>
  </tr>
</table>

Bien sûr, c’est dynamique. (J'ai créé une longue ligne avec 3 colonnes pour les écrans plus petits) À partir de là, vous pouvez ajouter des images à chaque colonne, en définissant la largeur du tr sur 200 px et la largeur de l'image sur 100 %.