我使用JavaScript构建的砖石布局中的Bug

我正试图建立一个网站，尽可能少地使用其他人的代码。我使用JavaScript构建了一个砖石风格的布局，它在大多数情况下都运行良好，除了我在chrome的开发者工具功能“切换设备工具栏”中切换屏幕大小时发现的一个错误。如果我手动调整窗口大小，我的布局将按预期工作。只有当我在顶部使用不同大小的名称（如“mobile s-320px”）切换时，才会触发此错误

砌体函数有点长，但我会尽我所能正确解释它。我在函数中添加了内联注释，以便尽可能全面地解释问题

我首先使用它们的宽度、视口的宽度、我想要的卡片之间的边距以及卡片与视口最左侧和最右侧之间的边距来计算视口中适合的卡片数量。我希望我的卡之间的边距为1米，卡与视图端口左右两侧之间的边距至少为0.5雷姆。我认为这就是“cardsSpace”。然后我从视口中减去它，计算出剩余的“空白”是什么。然后，我在页面的左右两侧均匀地将其分开，以便我的卡片始终居中。在将卡片放在页面的第一行之后，我通过计算哪一列是最短的来计算我应该将下一张卡片放在页面的哪一列。然后，我将我的卡放在相应的位置，然后更新存储页面“列”高度的数组，以反映其新值。然后我对剩余的卡重复这个过程，直到没有剩余的卡为止

最后，我向窗口添加了一个事件侦听器，以便在窗口调整大小时使用它，并在窗口调整大小时运行我的布局函数

const controller=new AbortController（）；
常数高度=[]；
const blocks=document.queryselectoral（'.card'）//从页面获取所有卡片
设边距=0；
设窗宽=0；
设colWidth=0；
让cardsSpace=0；
设colCount=0；
让空白=0；
设min=0；
设指数=0；
//将卡片放置在应该放置的位置以获得类似pinterest的布局的函数
函数setupBlocks（）{
//获取窗口宽度、卡片宽度，并将边距设置为等于一个rem
windowWidth=window.innerWidth；
colWidth=块[0]。clientWidth；
margin=parseInt（window.getComputedStyle（document.body.getPropertyValue（'font-size'））；
//计算视口“行”中适合的卡片数量
colCount=数学地板（窗宽/（窗宽+边距））；
//计算卡将占用的空间（包括它们之间的间距以及
//卡片与页面左右两侧之间的最小边距）
cardsSpace=colCount*（colWidth+margin）；
//计算将保留的空白
空白=窗口宽度-卡片空白；
//仅将第一行中适合的卡片放置在适当的位置
for（设i=0；in==min）；
//将卡片放置在最短的卡片列下方
blocks[i].style.left=`${blocks[index].offsetLeft}px`；
blocks[i].style.top=`${heights[index]}px`；
//更新高度数组以反映柱的新高度
高度[索引]+=（分块[i]。远视+边距）；
}
//如果需要，重置高度数组以重用此功能
heights.length=[]；
};
//等待所有内容加载后运行将卡放置在其所在位置的函数
//应该是
document.addEventListener（'readystatechange'，（事件）=>{
如果（document.readyState==“完成”）{
setupBlocks（）；
}
});
addEventListener（'resize'，setupBlocks，{signal:controller.signal}）
/*常规样式*/
：根{
框大小：边框框；
字体大小：calc（1vw+0.6em）；
字体系列：“蒙特塞拉特”，无衬线；
--主色：#557d79ff；
--次要颜色：#dae0e6；
--浅灰色：#999；
--重音：#2D2F；
--黑色文字：黑色；
字体大小：300；
}
*,
：：之前，
：：之后{
框大小：继承；
}
html，
身体{
保证金：0；
填充：0；
身高：100%；
宽度：100%；
线高：1.6；
背景色：var（--主色）；
}
身体，
h1，
h2，
h3，
h4，
P
保险商实验室{
保证金：0；
}
h3{
字号：1.25em；
}
img{
最大宽度：100%；
}
/*集装箱模块*/
.集装箱{
边距内联：自动；
宽度：最小值（90%，60em）；
}
.货柜店{
保证金：0；
宽度：100%；
位置：相对位置；
填充：0；
}
/*用于砌体布局的默认卡*/
.卡片{
位置：绝对位置；
边界半径：4em 4em 4em；
最大宽度：16em；
背景色：var（--二次色）；
边缘顶部：1米；
}
/*在鼠标悬停时，添加更深的阴影*/
.卡：悬停{
盒影：0 8px 16px 0 rgba（0,0,0,0.2）；
}
.卡体>**{
边缘顶部：0.4em；
}
.卡体{
填充物：5em 0 2em 1.5em；
}
/*将圆角添加到图像的左上角和右上角*/
.card\u image>a>img{
边缘顶部：0rem；
边界半径：4em 4em 0em 0em；
}

卡片和导航栏
最佳咖啡馆
乔纳森
舒适的咖啡厅，有美味的食物和饮料