适应儿童身高的砌体布局

Question

我的网站上有一个页面，我在其中展示了一些砖石布局的卡片。

它是在 Vue 3 中实现的，我希望布局能够适应容器的子高度。

布局从上到下，从左到右。就像图片显示的那样：

为了实现这一点，我使用order CSS 属性和弹性框将卡片分成不同的列。

但是，要使其正常工作，父容器需要具有固定高度。

我希望这是确保所有卡片都适合的最小高度，即布局中最长列的确切高度。

我最初尝试将容器的高度设置为 0，然后根据卡片的高度对其进行更新，但是，这不是很好，而且真的很笨拙。

<template>
    <section class="container" :style="{ height: containerHeight }">
        <project-card v-for="i in projects.length" :key="i" :project="projects[i - 1]"
                      :style="{ order: (i - 1) % numberColumns + 1, width: (100 / numberColumns) - 1.5 + '%' }"
                      :ref="setProjectCardRef">
        </project-card>

        <span v-for="i in numberColumns - 1" :key="i" :style="{ order: i }" class="item break"></span>
    </section>
</template>

<script>
import Projects from "@/api/Projects";
import ProjectCard from "@/components/ProjectCard";

export default {
    name: "Projects",
    components: {
        "project-card": ProjectCard,
    },
    data() {
        return {
            projects: [],
            projectCardsRefs: [],
            windowWidth: window.innerWidth,
            containerHeight: "100%"
        }
    },
    mounted() {
        this.getData();
        window.addEventListener('resize', () => {
            this.windowWidth = window.innerWidth
        })
    },
    methods: {
        getData() {
            Projects.list().then((response) => {
                for (let project of response.data)
                    project.image_url = process.env.VUE_APP_API_ENDPOINT + project.image_url;
                this.projects = response.data;
            });
        },
        setProjectCardRef(el) {
            if (!this.projectCardsRefs.includes(el))
                this.projectCardsRefs.push(el)
        }
    },
    computed: {
        numberColumns() {
            return Math.round(this.windowWidth / 400)
        },
    },
    async updated() {
        await new Promise(r => setTimeout(r, 200));
        let heights = Array(this.numberColumns).fill(0)
        
        for (let i = 0; i < this.projectCardsRefs.length; i++) {
            const style = this.projectCardsRefs[i].$el.currentStyle || window.getComputedStyle(this.projectCardsRefs[i].$el);
            const marginTop = parseInt(style.marginTop.match(/\d+/g)[0]);
            const height = parseFloat(style.height.match(/\d+(.\d+)?/g)[0]);
            heights[i % this.numberColumns] += height + marginTop
        }

        this.containerHeight = 40 + Math.max(...heights) + "px";
    }
}
</script>

<style scoped>
.container {
    @apply flex flex-col flex-wrap space-y-6;
}
.break {
    @apply mx-3 w-0;
    flex-basis: 100%;
}
</style>

如何以更灵敏的方式根据其子级设置容器的高度？

Answer 1

按照 Paulie_D 的建议，我使用 Masonry.JS 实现了它

<template>   
    <section id="container" v-masonry transition-duration="0.2s" item-selector=".item"
             percent-position="true" ref="container" :gutter="spaceBetween">
        <project-card class="item" v-masonry-tile v-for="i in projects.length" :key="i" :project="projects[i - 1]"
                      :style="`width: ${itemWidth}px; margin-bottom: ${spaceBetween}px`"/>
    </section>
</template>

<script>
import Projects from "@/api/Projects";
import ProjectCard from "@/components/ProjectCard";

export default {
    name: "Projects",
    components: {
        "project-card": ProjectCard,
    },
    data() {
        return {
            projects: [],
            containerWidth: 0,
            spaceBetween: 20
        }
    },
    mounted() {
        this.getData();

        new ResizeObserver(this.onResize).observe(document.getElementById("container"))
        this.onResize()
    },
    methods: {
        getData() {
            Projects.list().then((response) => {
                for (let project of response.data)
                    project.image_url = process.env.VUE_APP_API_ENDPOINT + project.image_url;

                this.projects = response.data;
            });
        },
        onResize() {
            this.containerWidth = document.querySelector("main").offsetWidth;
        }
    },
    computed: {
        numberColumns() {
            return Math.round(this.containerWidth / 400);
        },
        itemWidth() {
            return (this.containerWidth - this.numberColumns * this.spaceBetween) / this.numberColumns;
        }
    }
}
</script>