Удалите пустое пространство в сетке между изображениями, используя Semanti c UI и React - PullRequest
Новая
       24

Удалите пустое пространство в сетке между изображениями, используя Semanti c UI и React

1 голос
/ 29 февраля 2020

Я создаю галерею изображений, используя пользовательский интерфейс Semanti c, и у меня возникают трудности с избавлением от лишних пробелов между изображениями, которые не такие большие, как другие. Вот ссылка на репозиторий CodeSand Я знаю, что Semanti c Сетка пользовательского интерфейса основана на flexbox, но я не уверен, как ее изменить. Я хочу, чтобы сетка получалась как это

Если у меня есть массив изображений, таких как: 

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>

Если я использую это Из-за разных размеров между всеми изображениями будет много пустого пространства.

1 Ответ

1 голос
/ 29 февраля 2020

Итак, ваша текущая структура отображает изображения следующим образом: 

1 2 3
4 5 6
7 8 9

Но пример, который вы показали, отображает изображения следующим образом: 

1 4 7
2 5 8
3 6 9

Поэтому вместо размещения 1 изображения внутри каждого компонента Grid.Column вы должны поместить несколько изображений в каждый компонент 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>
...