1

我正在使用 Semantic UI 制作一个图片库，但我在摆脱不像其他图片那么大的图片之间的额外空白时遇到了一些困难。这是我知道 Semantic UI 的网格基于 flexbox 的代码和框 repo 的链接，但我不确定如何修改它。我想让网格像这样出来

如果我有一组图像，例如：

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>

如果我使用这个解决方案，由于尺寸不同，所有图像之间都会有很多空白。

4

1 回答 1

1

所以你当前的结构是像这样映射图像：

1 2 3
4 5 6
7 8 9

但是您展示的示例是这样映射图像：

1 4 7
2 5 8
3 6 9

因此，您应该在每个 Grid.Column 组件中放置多个图像，而不是在每个 Grid.Column 组件中放置 1 个图像。在这种情况下，理论上 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>
于 2020-02-29T04:45:37.970 回答