React MUI - 砌体移动响应答案

【问题标题】：React MUI - Masonry mobile responsiveReact MUI - 砌体移动响应
【发布时间】：2022-07-23 14:58:17
【问题描述】：

我是新手

我正试图弄清楚如何制作 Masonry 图像网格 - 移动响应。这个想法是我希望图像在移动视图上堆叠在一起。砌体网格仍应充当桌面屏幕上的砌体。

我只是不知道该怎么做。感谢您的帮助。

这是我的代码，查看演示here

import * as React from 'react';

// material-ui
import { useTheme, styled } from '@mui/material/styles';
import { Box, Paper, Button, Container, Grid, Typography } from '@mui/material';

import Masonry from '@mui/lab/Masonry';

const Label = styled(Paper)(({ theme }) => ({
  backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
  ...theme.typography.body2,
  padding: theme.spacing(0.5),
  textAlign: 'center',
  color: theme.palette.text.secondary,
  borderBottomLeftRadius: 0,
  borderBottomRightRadius: 0,
}));

const MasonryPage = () => (
  <Box>
    <Masonry columns={3} spacing={3}>
      {itemData.map((item, index) => (
        <div key={index}>
          <Label>{index + 1}</Label>
          <img
            src={`${item.img}?w=162&auto=format`}
            srcSet={`${item.img}?w=162&auto=format&dpr=2 2x`}
            alt={item.title}
            loading="lazy"
            style={{
              borderBottomLeftRadius: 4,
              borderBottomRightRadius: 4,
              display: 'block',
              width: '100%',
            }}
          />
        </div>
      ))}
    </Masonry>
  </Box>
);

export default MasonryPage;

const itemData = [
  {
    img: 'https://images.unsplash.com/photo-1518756131217-31eb79b20e8f',
    title: 'Fern',
  },
  {
    img: 'https://images.unsplash.com/photo-1627308595229-7830a5c91f9f',
    title: 'Snacks',
  },
  {
    img: 'https://images.unsplash.com/photo-1597645587822-e99fa5d45d25',
    title: 'Mushrooms',
  },
  {
    img: 'https://images.unsplash.com/photo-1529655683826-aba9b3e77383',
    title: 'Tower',
  },
  {
    img: 'https://images.unsplash.com/photo-1471357674240-e1a485acb3e1',
    title: 'Sea star',
  },
];

【问题讨论】：

标签： reactjs typescript material-ui masonry

【解决方案1】：

您可能想像这样尝试 columns={{lg:3, md:6}}

【讨论】：