我正在使用Material-ui-next并尝试以非常特殊的方式创建图像。
------ ---------
| | | | 2 |
| | | 1 |---|
| | | | 3 |
------ ---------
我有一些相当奇怪的问题。
1 - 3出现在1
之下2 - 2和3没有填满整个空间（突出显示时，无论图像如何，只使用了一半的内容空间）
3 - 有时我会得到类似下面的内容：
------ ---------
| | | | 2 |
| | | 1 |---|
| | | | 3 |
| | ---------
------
in that instance, everything on the right isn't extending all the way down
供您参考，如果您按照link进行操作，那么您将转到材料-ui-next GridList文档。在Advanced Grid List下，您会看到一张大图片和下面的许多小图片。我的目标是简单地水平翻转。
我已经破获了以下内容：
<GridList cols={4} rows={2}>
{
media.map((file, i) => (
<GridListTile style={{ display: 'flex', flexFlow: 'wrap row' }} cellHeight={200} key={i} cols={i===0 ? 3 : 1} rows={i===0 ? 2 : 1}>
<img src={file.url} />
</GridListTile>
))
}
</GridList>
以上导致3出现在2以下
<GridList cols={2} row={2} className={classes.gridList}>
{
<GridListTile cellHeight={200} key={1} cols={2} rows={2}>
<img src={file.url} />
</GridListTile>
}
</GridList>
</Grid>
<Grid item xs={12} md={3} style={{padding: '14px', paddingLeft: 0}}>
<Typography style={{ visibility: 'hidden' }}>a</Typography>
<GridList>
{
user && user.Media &&
<GridListTile cellHeight={200} style={{paddingBottom: 0}}>
<img src={file.url} />
</GridListTile>
}
</GridList>
<GridList>
{
user && user.Media &&
<GridListTile cellHeight={200} key={1} cols={1}>
<img src={file.url} />
</GridListTile>
}
</GridList>
这解决了问题1，但仍然有2和3。
我曾尝试使用原生flex-box，但每次我做的图像应该更大，转换为其他图像的大小。
这是我用于flex-box的css（诚然很少）。
gridContainer: {
display: 'flex',
flexFlow: 'row',
justifyContent: 'space-around',
margin: '3rem 0'
},
以下内容比上述任何内容都更好。两个小侧面图像完美地工作，并将随屏幕改变大小。大图像不会也将保持完全固定。
新CSS
gridList: {
transform: 'translateZ(0)',
display: 'flex',
justifyContent: 'left',
alignItems: 'left',
overflow: 'hidden',
'& img': {
flexShrink: 1,
minWidth: '200%',
minHeight: '200%'
}
},
gridListSmall: {
transform: 'translateZ(0)',
display: 'flex',
justifyContent: 'left',
alignItems: 'left',
overflow: 'hidden',
'& img': {
flexShrink: 0,
minWidth: '100%',
minHeight: '100%'
}
},
新HTML / JSX
<div cols={2} row={2} className={classes.gridList}>
{
<div cellHeight={200} key={1} cols={2} rows={2}>
<img src={file.url} />
</div>
}
</div>
</Grid>
<Grid item xs={12} md={3} style={{padding: '14px', paddingLeft: 0}}>
<Typography style={{ visibility: 'hidden' }}>a</Typography>
<div>
{
user && user.Media &&
<div cellHeight={200} style={{paddingBottom: 0}}>
<img src={file.url} />
</div>
}
</div>
<div>
{
user && user.Media &&
<div cellHeight={200} key={1} cols={1}>
<img src={file.url} />
</div>
}
</div>
答案 0 :(得分：2)
保持来自您指向Advanced Grid List
的示例的来源看看这一行：
<GridListTile
key={tile.img}
cols={tile.featured ? 2 : 1}
rows= {tile.featured ? 2 : 1}>
所有精选图片占据2列2行。
您希望自己的精选图片为1列2行，因此您需要将此cols={tile.featured ? 2 : 1}更改为此cols={tile.cols || 1}。
您可以指定网格列表包含的列数：
<GridList cols={2}>
您可以设置单元格高度：
<GridList cellHeight={160}>
您可以更改整个网格的属性：
const styles = theme => ({
gridList: {
width: 500,
height: 450,
}
});
更灵活的方法是将行设置为rows={tile.rows || 1}。
现在，您可以控制每个图像可以占用多少列和行
const tileData = [
{
img: image,
title: 'Image' // no rows or columns means 1x1
},
{
img: image,
title: 'Image',
rows: 2 // 2 rows 1 column
},
{
img: image,
title: 'Image',
cols: 2 // 1 rows 2 columns
},
{
img: image,
title: 'Image',
rows: 2,
cols: 2 // 2 rows & 2 columns
},
我认为你严重混淆了你的元素。 网格的结构是：
div
<GridList> classes.gridList和cellHeight道具
<GridListTile> cols和rows
<GridListTile> cols和rows
<GridListTile>确定图像所需的尺寸，是唯一需要填充图像的尺寸。这可以是1x1,1x2,2x1 ......
在我的代码中，我看到div与cols和rows，div与cellHeight，结构不完整（我看不到整个树）...我无法理解这一点。
<强>问题
<强>提示
您引用的组件不保证图像的确切顺序，它们会重新排序以填充所有单元格。
答案 1 :(得分：0)
在创建这个答案时，我使用了Valentin提出的问题中的建议和帖子上的评论。我最终放弃了GridList，而只是使用了Flexbox。
的HTML / JSX
<Grid item xs={12} md={8} style={{paddingRight: 0}}>
<Typography type="body2">Media</Typography>
<div>
{
<div className={classes.gridListContainer}>
<div className={classes.gridList} style={{width: '70%'}}>
<img
src={media.url[0]}
alt={media[0].name}
/>
</div>
<div className={classes.gridListSmall} style={{width: '30%'}}>
<img
src={media.url[1]}
alt={media[1].name}
/>
<img
src={media.url[2]}
alt={media[2].name}
/>
</div>
</div>
}
</div>
CSS
gridListContainer: {
display: 'flex',
flexFlow: 'row'
},
gridList: {
transform: 'translateZ(0)',
alignItems: 'stretch',
overflow: 'hidden',
'& img': {
width: '100%',
height: '100%',
}
},
gridListSmall: {
transform: 'translateZ(0)',
// flexFlow: 'column',
justifyContent: 'left',
alignItems: 'stretch',
overflow: 'hidden',
'& img': {
flexShrink: 0,
height: '50%',
verticalAlign: 'middle'
},
'& div img': {
flexShrink: 0,
height: '50%',
verticalAlign: 'middle',
content: 'words'
}
}
它创造了我想要的完美形状，如下所示。它只能容纳3个图像，所以我只是称之为索引。
---------
| | 2 |
| 1 |---|
| | 3 |
---------