javascript - 显示右侧有一个大的和两个小的图像

Question

我正在使用 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然后您将转到 material-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>

Answer 1

保留您指向的示例中的源代码 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
},

---

对您的新编辑的回答

我认为你混合元素很糟糕。网格的结构是:

• 网格容器 = a div与 classes.root
  • 网格列表 = <GridList>与 classes.gridList和 cellHeight支柱
    • GridListTile = <GridListTile>与 cols和 rows
      • 你的形象
      • 一些其他内容
    • GridListTile = <GridListTile>与 cols和 rows
      • 你的形象
      • 一些其他内容

<GridListTile>确定图像所需的大小，并且是唯一需要用图像填充的大小。这可以是 1x1、1x2、2x1...

在你的代码中我看到了div与 cols和 rows , div与 cellHeight ，结构不完整(我看不到整棵树)...我无法理解这一点。

---

问题

• 您使用的是示例中提到的组件吗？
• 您还需要这 3 张图片吗？

---

提示

您引用的组件不保证图像的确切顺序，它们会重新排序以填充所有单元格。