在React中实现类似Pinterest的动态图片的CSS网格

Question

所以我正在尝试使用CSS Grid来制作一个类似Pinterest的图片画廊。所以不同高度的图片可以相邻，并且每个图片可以占用空白空间。但是我看到的所有示例都是根据他们想要的高度在每个图片上添加不同的类，而我想从数据库动态添加图片。

我尝试了这样做：

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

我的CSS文件：

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

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

但是这样小的图片在同一行，大的图片在另一行，而我希望它们是随机的。

有没有办法在不为每个图片添加不同的类的情况下实现这一点？

Answer 1

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

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

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