Implementierung eines Pinterest-ähnlichen CSS-Rasters dynamischer Bilder in React

Question

Also versuche ich, CSS Grid zu verwenden, um eine Pinterest-ähnliche Bildergalerie zu erstellen. So können unterschiedlich hohe Bilder nebeneinander stehen und jedes Bild kann leeren Raum einnehmen. Aber alle Beispiele, die ich gesehen habe, fügen jedem Bild basierend auf der gewünschten Höhe unterschiedliche Klassen hinzu, wohingegen ich Bilder dynamisch aus der Datenbank hinzufügen möchte.

Ich habe Folgendes versucht:

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

Meine CSS-Datei:

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

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

Aber die kleinen Bilder sind also in derselben Reihe und die großen Bilder in einer anderen Reihe, und ich möchte, dass sie zufällig sind.

Gibt es eine Möglichkeit, dies zu erreichen, ohne für jedes Bild eine andere Klasse hinzuzufügen?

Answer 1

Pinterst使用垂直对齐。所以，如果你想复制它，你应该创建垂直的盒子，它们相邻并具有固定的宽度。 并显示尽可能多的行，以适应屏幕的大小。（如果你调整Pinterest窗口的宽度，整个页面会重新生成，但这超出了你的问题范围，我猜） 所以我建议使用div或者甚至一个只有一行和一个长列的表格。

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

当然是动态的。（我为较小的屏幕创建了一个有3列的长行） 从这里开始，你可以将图片添加到每一列，将tr的宽度设置为200px，图片的宽度设置为100%。