javascript - 给定项目索引，如何获得网格行/列位置

Question

如果我有一个宽度为 1000 像素的容器，其中填充了所有宽度为 200 像素的项目。如何计算该图 block 的行/列位置？

更详细的解释:

我唯一知道的变量是容器的宽度(上面示例中的 1200px)、项目的宽度(上面的 200px)和项目索引(从 1 开始)。

仅给定上述信息，如何通过使用 javascript 输入单元格的索引来计算单元格的行和列。

例如给定每行最大项目值 6(可以根据项目宽度和容器宽度轻松计算)，我需要能够计算出项目编号 7 是在第 2 行第 1 列。

容器和项目宽度可能并不总是可以完全整除，因此方程式必须考虑每行末尾所需的任何额外空白，并自然地将项目包装到下一行，就像它们在 html float 布局中一样。

提前致谢

编辑:

通过执行以下操作，我已经设法非常准确地获得了该行:

var itemsperrow = Math.floor(containerwidth/ itemwidth);
var column = Math.ceil(itemindex / itemsperrow )

这是项目索引从 1 而不是 0 开始；

Answer 1

1. 通过取(行宽)/(元素宽度)的底数来计算一行中可以容纳多少个元素。
2. 将给定的索引号除以每行的元素(您刚刚计算出来的)。这将为您提供行位置。
3. 接下来通过从步骤 1 中取余数部分找到列位置(您可以使用模数)。将余数乘以每行的元素数。这将是它所在的列。

示例:每行 3 个元素，第 4 个元素:楼层(4/3)= 1(第 1 行)余数=(4%3)=1(列位置)

请注意您的起始索引(无论是 0 还是 1)。这个例子从 1 开始。如果你想从 0 开始，通过减去 1(索引号)来改变它。