使用 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

我想你要找的是砖石网格。值得 google 搜索。这些包的作用是在页面加载和调整大小时计算容器内的位置。反应的一个例子可以是 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>
        )
    }
}

在 material ui 的情况下，您基本上会替换 Grid 并且只在 Masonry.

内渲染卡片

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

Create a grid with variable card heights using material-ui react

responsive-design

reactjs

material-design

material-ui

reactstrap