JavaScript：如何调整 div.card 的大小

Question

对不起，我的英语不好，希望你能理解我有什么样的问题。所以，这是代码，它的作用是调整div.cards的大小。我的意思是，当我的窗口全屏显示时，表格会正确显示div.cards。因此，当我开始更改窗口的大小时，其中一些卡在某些行中更改偏移量Height（始终取决于它们上的文本）。我附上了我的桌子的图像（带有非全屏窗口）。所以，正如你所看到的，当我改变我的窗口时，卡片的偏移量会改变，所以，我已经实现的是将相同的高度应用于行中具有最高div.card的所有div.cards。我仍然卡住的地方是：当我将窗口返回到全屏时，那些div.cards应该回到原来的偏移量，但仍然无法理解如何做到这一点。我已经尝试过了，比如把我所有的div.cards的offetchigh高度放入数组中，然后以某种方式恢复它们，但没有成功。我的桌子            var table = document.getElementById("table");            var row, n, column, m, mColumn, t;            var maxOffSet = 0, minOffSet = 0;            for (row = 0, n = table.rows.length; row < n; row++) {                for (column = 0, m = table.rows[row].cells.length; column < m; column++) {                    console.log('Row: ' + [row] + ' Column:' + [column] + ' clHeight: ' + table.rows[row].getElementsByClassName("card")[column].offsetHeight);                    // if (maxOffSet < table.rows[row].getElementsByClassName("card")[column].offsetHeight) {                    //     maxOffSet = table.rows[row].getElementsByClassName("card")[column].offsetHeight;                    // }                }                // table.rows[row].style.minHeight = maxOffSet;                // for (mColumn = 0, t = table.rows[row].cells.length; mColumn < t; mColumn++) {                //     table.rows[row].getElementsByClassName("card")[mColumn].style.height = maxOffSet + 'px';                // }            }        };

Answer 1

我自己找到了解决方案：基本上我引入了一个数组，它将最大 OffsetHeight 存储在行中，然后将其应用于所有 div.cards，在完成该行后，它将进行清理，以便他可以填充新行 eccetera 的数据...

断续器

window.addEventListener('resize', function(event){

                resetTable();

                resizeTable();

            });

        function resetTable() {

            var table = document.getElementById("table");

            var row, n, column, m;

            for (row = 0, n = table.rows.length; row < n; row++) {

                for (column = 0, m = table.rows[row].cells.length; column < m; column++) {

                    //console.log('Row: ' + [row] + ' Column:' + [column] + ' clHeight: ' + table.rows[row].getElementsByClassName("card")[column].offsetHeight);

                    table.rows[row].getElementsByClassName("card")[column].style.minHeight = 'auto';

                }

            }

        }

        function resizeTable() {

            //console.log('Rows: ' + document.getElementById("table").rows.length);

            var table = document.getElementById("table");

            var row, n, column, m, mColumn, t, arr = [];

            for (row = 0, n = table.rows.length; row < n; row++) {

                for (column = 0, m = table.rows[row].cells.length; column < m; column++) {

                    //console.log('Row: ' + [row] + ' Column:' + [column] + ' clHeight: ' + table.rows[row].getElementsByClassName("card")[column].offsetHeight);

                    arr.push(table.rows[row].getElementsByClassName("card")[column].offsetHeight);

                }

                for (mColumn = 0, t = table.rows[row].cells.length; mColumn < t; mColumn++) {

                    //console.log('Row: ' + [row] + ' Column:' + [mColumn] + ' clHeight: ' + Math.max.apply(Math, arr));

                    table.rows[row].getElementsByClassName("card")[mColumn].style.minHeight = Math.max.apply(Math, arr) + 'px';

                }

                arr = [];

            }

        }