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){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; resetTable();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; resizeTable();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; function resetTable() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var table = document.getElementById("table");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var row, n, column, m;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for (row = 0, n = table.rows.length; row < n; row++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for (column = 0, m = table.rows[row].cells.length; column < m; column++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //console.log('Row: ' + [row] + ' Column:' + [column] + ' clHeight: ' + table.rows[row].getElementsByClassName("card")[column].offsetHeight);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; table.rows[row].getElementsByClassName("card")[column].style.minHeight = 'auto';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; function resizeTable() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //console.log('Rows: ' + document.getElementById("table").rows.length);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var table = document.getElementById("table");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var row, n, column, m, mColumn, t, arr = [];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for (row = 0, n = table.rows.length; row < n; row++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for (column = 0, m = table.rows[row].cells.length; column < m; column++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //console.log('Row: ' + [row] + ' Column:' + [column] + ' clHeight: ' + table.rows[row].getElementsByClassName("card")[column].offsetHeight);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; arr.push(table.rows[row].getElementsByClassName("card")[column].offsetHeight);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for (mColumn = 0, t = table.rows[row].cells.length; mColumn < t; mColumn++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //console.log('Row: ' + [row] + ' Column:' + [mColumn] + ' clHeight: ' + Math.max.apply(Math, arr));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; table.rows[row].getElementsByClassName("card")[mColumn].style.minHeight = Math.max.apply(Math, arr) + 'px';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; arr = [];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }