Image list 图像列表

图像列表在一个系统的栅格中展示了一系列的图像。

图像列表表示重复模式的项目集合。它们有助于提高对所持内容的视觉理解。

标准的图像列表

标准的图像列表最适合用于同等重要的项目。它们具有统一的容器尺寸、比例和间距。

<ImageList sx={{ width: 500, height: 450 }} cols={3} rowHeight={164}>
  {itemData.map((item) => (
    <ImageListItem key={item.img}>
      <img
        src={`${item.img}?w=164&h=164&fit=crop&auto=format`}
        srcSet={`${item.img}?w=164&h=164&fit=crop&auto=format&dpr=2 2x`}
        alt={item.title}
        loading="lazy"
      />
    </ImageListItem>
  ))}
</ImageList>

<ImageList sx={{ width: 500, height: 450 }} cols={3} rowHeight={164}>
  {itemData.map((item) => (
    <ImageListItem key={item.img}>
      <img
        src={`${item.img}?w=164&h=164&fit=crop&auto=format`}
        srcSet={`${item.img}?w=164&h=164&fit=crop&auto=format&dpr=2 2x`}
        alt={item.title}
        loading="lazy"
      />
    </ImageListItem>
  ))}
</ImageList>

Press Enter to start editing

拼接图像列表

拼接图像列表强调集合中的某些项目而不是之外的其他项目。它们使用不同的容器尺寸和比例来创建层次结构。

<ImageList
  sx={{ width: 500, height: 450 }}
  variant="quilted"
  cols={4}
  rowHeight={121}
>
  {itemData.map((item) => (
    <ImageListItem key={item.img} cols={item.cols || 1} rows={item.rows || 1}>
      <img
        {...srcset(item.img, 121, item.rows, item.cols)}
        alt={item.title}
        loading="lazy"
      />
    </ImageListItem>
  ))}
</ImageList>

<ImageList
  sx={{ width: 500, height: 450 }}
  variant="quilted"
  cols={4}
  rowHeight={121}
>
  {itemData.map((item) => (
    <ImageListItem key={item.img} cols={item.cols || 1} rows={item.rows || 1}>
      <img
        {...srcset(item.img, 121, item.rows, item.cols)}
        alt={item.title}
        loading="lazy"
      />
    </ImageListItem>
  ))}
</ImageList>

Press Enter to start editing

交织图像列表

交织图像列表使用交替的容器比率来创建一个有节奏的布局。当需要浏览同行内容时，最好采用交织图像列表的方式。

<ImageList sx={{ width: 500, height: 450 }} variant="woven" cols={3} gap={8}>
  {itemData.map((item) => (
    <ImageListItem key={item.img}>
      <img
        src={`${item.img}?w=161&fit=crop&auto=format`}
        srcSet={`${item.img}?w=161&fit=crop&auto=format&dpr=2 2x`}
        alt={item.title}
        loading="lazy"
      />
    </ImageListItem>
  ))}
</ImageList>

<ImageList sx={{ width: 500, height: 450 }} variant="woven" cols={3} gap={8}>
  {itemData.map((item) => (
    <ImageListItem key={item.img}>
      <img
        src={`${item.img}?w=161&fit=crop&auto=format`}
        srcSet={`${item.img}?w=161&fit=crop&auto=format&dpr=2 2x`}
        alt={item.title}
        loading="lazy"
      />
    </ImageListItem>
  ))}
</ImageList>

Press Enter to start editing

堆砌图像列表

堆砌图像列表使用动态调整大小的容器高度，以反映每个图像的纵横比。该图像列表最适合用于浏览未被裁剪的同行内容。

<ImageList variant="masonry" cols={3} gap={8}>
  {itemData.map((item) => (
    <ImageListItem key={item.img}>
      <img
        src={`${item.img}?w=248&fit=crop&auto=format`}
        srcSet={`${item.img}?w=248&fit=crop&auto=format&dpr=2 2x`}
        alt={item.title}
        loading="lazy"
      />
    </ImageListItem>
  ))}
</ImageList>

<ImageList variant="masonry" cols={3} gap={8}>
  {itemData.map((item) => (
    <ImageListItem key={item.img}>
      <img
        src={`${item.img}?w=248&fit=crop&auto=format`}
        srcSet={`${item.img}?w=248&fit=crop&auto=format&dpr=2 2x`}
        alt={item.title}
        loading="lazy"
      />
    </ImageListItem>
  ))}
</ImageList>

Press Enter to start editing

带标题栏的图像列表

此示例演示如何使用 ImageListItemBar 来为每个子块添加一个叠加层。叠加层可以容纳 title， subtitle 和辅助操作—在本例中为 IconButton。

December
Breakfast
@bkristastucchio
Burger
@rollelflex_graphy726
Camera
@helloimnik
Coffee
@nolanissac
Hats
@hjrc33
Honey
@arwinneil
Basketball
@tjdragotta
Fern
@katie_wasserman
Mushrooms
@silverdalex
Tomato basil
@shelleypauls
Sea star
@peterlaster
Bike
@southside_customs

位于图像下方的标题栏（标准）

标题栏可以放置在图像下方。

Breakfast
by: @bkristastucchio
Burger
by: @rollelflex_graphy726
Camera
by: @helloimnik
Coffee
by: @nolanissac
Hats
by: @hjrc33
Honey
by: @arwinneil
Basketball
by: @tjdragotta
Fern
by: @katie_wasserman
Mushrooms
by: @silverdalex
Tomato basil
by: @shelleypauls
Sea star
by: @peterlaster
Bike
by: @southside_customs

位于图像下方的标题栏（堆砌）

swabdesign
Pavel Nekoranec
Charles Deluvio
Christian Mackie
Darren Richardson
Taylor Simpson
Ben Kolde
Philipp Berndt
Jen P.
Douglas Sheppard
Fi Bell
Hutomo Abrianto

<ImageList variant="masonry" cols={3} gap={8}>
  {itemData.map((item) => (
    <ImageListItem key={item.img}>
      <img
        src={`${item.img}?w=248&fit=crop&auto=format`}
        srcSet={`${item.img}?w=248&fit=crop&auto=format&dpr=2 2x`}
        alt={item.title}
        loading="lazy"
      />
      <ImageListItemBar position="below" title={item.author} />
    </ImageListItem>
  ))}
</ImageList>

<ImageList variant="masonry" cols={3} gap={8}>
  {itemData.map((item) => (
    <ImageListItem key={item.img}>
      <img
        src={`${item.img}?w=248&fit=crop&auto=format`}
        srcSet={`${item.img}?w=248&fit=crop&auto=format&dpr=2 2x`}
        alt={item.title}
        loading="lazy"
      />
      <ImageListItemBar position="below" title={item.author} />
    </ImageListItem>
  ))}
</ImageList>

Press Enter to start editing