Всем привет. Я делаю сайт на react и появилась необходимость определенным образом оформить группу изображений. Я пробовал делать при помощи material-ui ImageList. Сначала просто при помощи ImageListItem в ImageList, но там были проблемы с высотой контейнеров картинок и в итоге они распологались почти так, как надо, но с неправильной высотой(рисунок 2). Потом я решил разделить их на группы. Группа - ImageListItem элемент, в котором распологался ImageList элемент, в котором распологались ImageListItem элементы уже с картинками) В итоге, из этого тоже ничего не вышло. В этом случае вообще все было странно и далеко от того, что мне нужно. И, пока что, идей, как это сделать у меня нет.
const Drawings = ({grey}) => {
const drawings = [
{img: drw1Img, cols: 2, rows: 6,},
{img: drw2Img, cols: 4, rows: 4,},
{img: drw3Img, cols: 6, rows: 4,},
{img: drw4Img, cols: 2, rows: 4,},
{img: drw5Img, cols: 4, rows: 5,},
{img: drw6Img, cols: 3, rows: 5,},
{img: drw7Img, cols: 3, rows: 5,},
{img: drw8Img, cols: 5, rows:8,},
{img: drw9Img, cols: 3, rows: 4,},
{img: drw10Img, cols: 3, rows: 4,},
{img: drw11Img, cols: 4, rows: 8,},
]
return (
<AppContainer withoutTitle grey={grey}>
<AppContainerItem lg={12} md={12} sm={12} xs={12}>
<ImageList rowHeight={50} cols={12}>
{drawings.map(({img, cols, rows}) => {
return <ImageListItem key={img} cols={cols} rows={rows}>
<img src={img}/>
</ImageListItem>
})}
</ImageList>
</AppContainerItem>
</AppContainer>
);
};
const DrawingsGroup = ({children, groupCols, groupRows}) => {
return (
<ImageListItem rows={groupRows || 9} cols={groupCols || 6}>
<ImageList rowHeight={50} cols={2}>
{children.map(({img, cols, rows}) => {
return <ImageListItem key={img} cols={cols} rows={rows}>
<img src={img}/>
</ImageListItem>
})}
</ImageList>
</ImageListItem>
);
};