使用 material-ui react 创建具有可变卡片高度的网格

Question

我正在尝试使用 Material-UI 创建一个类似于this website 的网格。然而，当一张卡片的高度发生变化时，每张卡片的高度都会发生变化。我尝试使用direction="row" 和direction="column"，但它似乎不起作用。我想知道是否有办法根据图像的大小改变内部图像的高度，同时拥有像上面网站这样的网格。

我现在只能看到：

这是我的卡片代码：

import React from 'react';
import Card from '@material-ui/core/Card';
import CardHeader from '@material-ui/core/CardHeader';
import CardMedia from '@material-ui/core/CardMedia';
import CardContent from '@material-ui/core/CardContent';
import CardActions from '@material-ui/core/CardActions';
import Avatar from '@material-ui/core/Avatar';
import IconButton from '@material-ui/core/IconButton';
// import Typography from '@material-ui/core/Typography';
import FavoriteIcon from '@material-ui/icons/Favorite';
import ShareIcon from '@material-ui/icons/Share';
import MoreVertIcon from '@material-ui/icons/MoreVert';
import { useStyles } from '../style/card.styles';


export default function Cards({ profile, sourceImage }) {
    const classes = useStyles();

    return (
        <Card className={classes.root} style={{ height: '100%' }}>
            <CardHeader
                avatar={
                    <Avatar aria-label="recipe" src={profile} className={classes.avatar}>
                    </Avatar>
                }
                action={
                    <IconButton aria-label="settings">
                        <MoreVertIcon />
                    </IconButton>
                }
                title="Shrimp and Chorizo Paella"
                subheader="September 14, 2016"
            />

            <CardContent>
                <CardMedia
                    className={classes.media}
                    image={sourceImage}
                    title="Paella dish"
                />
                {/* <img src={sourceImage} style={{ maxHeight: '20rem' }} /> */}
            </CardContent>
            <CardActions disableSpacing>
                <IconButton aria-label="add to favorites">
                    <FavoriteIcon />
                </IconButton>
                <IconButton aria-label="share">
                    <ShareIcon />
                </IconButton>
            </CardActions>
        </Card>
    );
}

还有布局页面：

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import Cards from './Card';
import vertical from '../images/v1.jfif';
import horizontal from '../images/h1.png';
import '../style/card.css';

const useStyles = makeStyles((theme) => ({
    root: {
        flexGrow: 1,
    },
    paper: {
        height: 140,
        width: 100,
    },
    control: {
        padding: theme.spacing(2),
    }
}));

export default function HomePage() {
    const imagess = [vertical, horizontal, vertical, horizontal]
    const classes = useStyles();

    return (
        <Grid container justify="center" className={classes.root} spacing={2}>
            <Grid item xs={12}>
                <Grid container alignItems="flex-start" justify="center" spacing={1}>
                    {imagess.map((image, index) => (
                        <Grid key={index} item>
                            <Cards profile={""} sourceImage={image} />
                        </Grid>
                    ))}
                </Grid>
                <Grid container alignItems="flex-start" justify="center" spacing={1}>
                    {imagess.map((image, index) => (
                        <Grid key={index} item>
                            <Cards profile={""} sourceImage={image} />
                        </Grid>
                    ))}
                </Grid>
            </Grid>
        </Grid>
    );
}

Answer 1

我认为您正在寻找的是砖石网格。值得谷歌搜索。 这些包所做的是在页面加载和调整大小时计算容器内的位置。反应的一个例子可能是react-responsive-masonry

react-responsive-masonry 的用法示例

import React from "react"
import Masonry, {ResponsiveMasonry} from "react-responsive-masonry"

// The number of columns change by resizing the window
class MyWrapper extends React.Component {
    render() {
        return (
            <ResponsiveMasonry
                columnsCountBreakPoints={{350: 1, 750: 2, 900: 3}}
            >
                <Masonry>
                    <ChildA />
                    <ChildB />
                    {/* Children */}
                    <ChildY />
                    <ChildZ />
                </Masonry>
            </ResponsiveMasonry>
        )
    }
}

// The number of columns don't change by resizing the window
class MyWrapper extends Component {
    render() {
        return (
            <Masonry columnsCount={3}>
                <ChildA />
                <ChildB />
                {/* Children */}
                <ChildY />
                <ChildZ />
            </Masonry>
        )
    }
}

如果是材质 ui，您基本上会替换 Grid，并且只在 Masonry 内渲染卡片。