每个card宽度固定要求在容器宽度改变时能自动换行要有过渡效果问题二:当每个元素高度不固定的时候，如何让每一列的高度差最小。

看上去就是瀑布流，加了个 transition: all 1s; https://jsrun.net/rfUKp/edit

前端元素自动换行，如何加上过渡效果

贴一下自己的解决办法和朋友一起想出来的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            position: relative;
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            margin: 0 auto;
        }

        .item {
            position: absolute;
            width: 130px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 20px;
            box-shadow: 0 0 10px 2px rgba(0, 0, 0, .3);
            transition: all .3s;
            will-change: transform;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="item ">1</div>
        <div class="item ">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
        <div class="item">10</div>
        <div class="item">11</div>
        <div class="item">12</div>
        <div class="item">13</div>
        <div class="item">14</div>
        <div class="item">15</div>
        <div class="item">16</div>
        <div class="item">17</div>
        <div class="item">18</div>
        <div class="item">19</div>
        <div class="item">20</div>
    </div>
    <script>
        let container = document.querySelector(".container");
        let items = document.querySelectorAll(".item");
        let baseWidth = items[0].clientWidth + 20;
        let nodeLayout = [];
        //一行可以放多少个
        let column = Math.floor(container.clientWidth / baseWidth);
        //随机赋予初始高度
        items.forEach((node, index) => {
            node.style.height = `${Math.random() * 200 + 100}px`;
        })
        reset();
        function reset() {
            nodeLayout = [];
            let row = Math.floor(items.length / column);
            if (row !== 0 && items.length % column !== 0) {
                row = row + 1
            }
            for (let i = 1; i <= row; i++) {
                nodeLayout.push([])
            }
            items.forEach((node, index) => {
                //y轴坐标
                const y = Math.floor(index / column);
                //x轴坐标
                const x = index % column;
                //生成视图对应的实例容器
                node.x = x;
                node.y = y;
                node.isNode = true;
                nodeLayout[y].push(node);
            });
            console.table(nodeLayout);
            //填充对象 方便后面变换顺序
            for (let i = 0; i < column; i++) {
                if (!nodeLayout[row - 1][i]) {
                    nodeLayout[row - 1][i] = { y: row - 1, x: i }
                }
            }
            //设置top left
            changStyle(nodeLayout);
        }
        function changStyle(Layout) {
            Layout.forEach(arr => {
                arr.forEach(node => {
                    if (node.isNode) {
                        if (node.y > 0) {
                            resetTop(getNode(node.x, node.y - 1), node);
                        } else {
                            node.style.top = `${20}px`;
                        }
                        node.style.left = `${node.x * baseWidth + 20}px`;
                    }
                })

            })
        }
        function getNode(x, y) {
            if (!nodeLayout[y]) {
                return "不存在该节点"
            }
            if (!nodeLayout[y][x]) {
                return "不存在该节点"
            }
            return nodeLayout[y][x];
        }
        function resetTop(preNode, node) {
            let str = preNode.style.top;
            let preTop = str.slice(0, str.length - 2) * 1;
            node.style.top = `${preTop + preNode.clientHeight + 20}px`;
        }
        function resetLeft(preNode, node) {
            let str = preNode.style.left;
            let preLeft = str.slice(0, str.length - 2) * 1;
            node.style.left = `${preLeft}px`;
        }
        window.onresize = function () {
            const newColumn = Math.floor(container.clientWidth / baseWidth);
            if (newColumn !== column) {
                column = newColumn;
                requestAnimationFrame(reset)
            }
        };
    </script>
</body>

</html>

前端元素自动换行，如何加上过渡效果

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

请问zustand的slice里面的属性，如何配置TypeScript类型约束？