[使用语义UI和React删除图像之间网格中的空白

Question

我正在使用语义UI制作图片库，并且在摆脱不如其他图片的图片之间多余的空白时遇到了一些困难。 Here's the link to the codesandbox repo我知道语义UI的网格基于flexbox，但是我不确定如何修改它。I want to make the grid come out like this

如果我有一系列图像，例如：

const images = { 
  {id: 1, source: '/image1.jpg' },
  { id: 2, source: '/image2.jpg' },
  { id: 3, source: '/image3.jpg' }
}

并在网格中通过它映射：

<Grid columns={3}>
    {images.map(image => (
      <Grid.Column key={image.key}>
        <Image src={image.source} />
      </Grid.Column>
    ))}
</Grid>

如果使用此解决方案，由于大小不同，所有图像之间将有很多空白。

Answer 1

所以您当前的结构正在映射这样的图像：

1 2 3
4 5 6
7 8 9

但是您显示的示例正在映射这样的图像：

1 4 7
2 5 8
3 6 9

因此，不要在每个Grid.Column组件中放置1张图像，而应在每个Grid.Column组件中放置多个图像。从理论上讲，在这种情况下，1/3是正确的，但是如果缩小页面宽度，则可能需要重新计算列数。

let cols = this.state.numberOfColumns
let imagesplit = []
for (let i = 0; i < images.length; i + cols) {
  for (let j = 0; j < cols; j++) {
    if (! imagesplit [j]) { imagesplit[j] = [] }
      if (images[i + j]) {
        imagesplit[j].push(images[i+j]
      }
  }
}
<Grid columns={cols}>
    { imagesplit.map(imagearray => 
      return imagearray.map(images => (
        <Grid.Column key={image.key}>
          <Image src={image.source} />
        </Grid.Column>
    ))}}
</Grid>