Javascript 计算动态行中的元素数

使用动态排列行中的元素时，浏览器会根据视口的大小计算行中的项目数。我正在寻找一种使用JavaScript确定给定视口大小下每行中有多少项的方法。我的目的是在最后填充不可避免的部分空行

例如，给定下面列出的CSS和HTML，并以特定视口大小生成此布局：

在更宽的视口中，会产生此布局：

每一个在最后一行中都缺少元素

我正在寻找一种方法来确定一行中有多少个元素。有了这些信息，我就可以动态加载更多的元素来填充最后一行，这样它的数字就和其余的一样了

---

CSS和HTML示例：

* {
框大小：边框框；
}
身体{
填充：1rem；
}
主要{
最大宽度：500px；
保证金：0自动；
}
文章{
保证金：1rem 0；
溢出：隐藏；
}
主要{
最大宽度：10000px；
保证金：0；
}
文章{
保证金：0；
}
.物品{
显示：网格；
网格模板列：重复（自动拟合，最小值（200px，1fr））；
网格间距：1rem；
}
.物品{
字体系列：Avenir、Roboto、Helvetica、san serif；
字号：80%；
}
.上市{
显示器：flex；
柔性流动：柱；
边框：1px纯银；
}
.listing>h1{
保证金：1rem 1rem 0；
}
.listing>div{
保证金：0.25em 1rem 1rem；
}
.listing>img{
宽度：自动；
最大高度：200px；
顺序：-1；
自对准：居中；
}

87,500
1008[3/2]0
30,000
952[2/1]0
70,000
1090[3/1]0
11,000
828[2/1]2
25,000
1484[2/1]0
199,000
2160[3/2]0
42,000
1509[3/2]0
230,000
1885[3/2]0

elem.clientWidth

本例使用element属性计算每行中的元素数

var rowlength=Math.floor（//向下舍入以考虑一些间距
document.body.clientWidth///视口的宽度除以。。。
document.querySelectorAll（'article'）[0]。clientWidth//元素的宽度
)

这给了我每行中的项目数，可能除了最后一行

---

完成最后一行

我知道我最初加载了8个元素，因此现在可以计算完成最后一行需要多少项：

var numelementsloadded=8

或者，我可以计算加载元素的数量：

var numelementsloadded=document.queryselectoral（'article'）.length

（除法余数）运算符将给出最后一行中的元素数：

var numelementslastrow=elementsloaded%rowlength

现在计算完成最后一行所需的元素数：

var NumelementsRequired=rowlength-numelementslastrow

所有这些都在一起并经过压缩，还有一个额外的好处：

var rowlength=Math.floor（document.body.clientWidth/document.querySelectorAll（'article'）[0].clientWidth）
var NumelementsRequired=rowlength-（document.queryselectoral（'article'）。长度%rowlength）
//并复制前几个元素以说明完成最后一行
对于（var ii=0；ii

这就完成了最后一行：

---

删除最后一行

另一个技术上更简单的选项是，不添加新项目，而是将最后一行中的所有项目删除：

var rowlength=Math.floor（document.body.clientWidth/document.querySelectorAll（'article'）[0].clientWidth）
var numelementslastrow=document.querySelectorAll（'article'）。长度%rowlength
//并删除最后一行中的元素
对于（var ii=0；ii

如果最后一行已满，它将保持不变。例如，如果有8个项目，且每行有4个项目，则8 mod 4=0，因此不会执行

For

循环

---

elem.getBoundingClientRect（）.left

elem.getBoundingClientRect（）.left

属性可用于获取CSS网格布局中的动态行数。只需循环浏览

文章

元素，并将元素的

getBoundingClientRect（）。左

值与上一个值进行比较。比较的值将在每行中增加，然后在下一行中开始时下降。计算增量，直到出现第一次下降，以确定每行中的元素数

var articles=document.querySelectorAll（'article'））
console.log（articles[0].getBoundingClientRect（）.left）//16
console.log（articles[1].getBoundingClientRect（）.left）//238.156
console.log（articles[2].getBoundingClientRect（）.left）//460.312
console.log（articles[3].getBoundingClientRect（）.left）//682.468
console.log（articles[4].getBoundingClientRect（）.left）//904.625
console.log（articles[5].getBoundingClientRect（）.left）//1126.78
console.log（articles[6].getBoundingClientRect（）.left）//16

因此，我们只需要计算上一个

左

值和下一个

值之间的值的增加，一旦它下降，我们就可以进行行计数


这里使用
call
在节点列表上应用数组方法
reduce
。使用
reduce
结转每个值以与下一个值进行比较：

var rowlen=Array.prototype.reduce.call（document.queryselectoral（'article'），函数（prev，next）{
如果（！prev[2]）{
var ret=next.getBoundingClientRect（）.left
//如果递增，则递增计数器
如果（！（prev[0]>-1&&ret