如何在给定项目索引的情况下获取网格行/列位置

Question

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

更详细的解释：

我知道的唯一变量是容器的宽度（上例中为 1200 像素）、项目的宽度（上例中为 200 像素）和项目索引（从 1 开始）。

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

例如给定每行的最大项目值 6 （可以很容易地从项目宽度和容器宽度计算出来），我需要能够计算出项目编号 7 是在第 2 行第 1 列。

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

提前致谢

编辑：

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

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

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

Answer 1

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

示例：每行 3 个元素，第 4 个元素： floor(4/3) = 1（第 1 行） 余数 = (4%3)=1（列位置）

注意您从哪个索引开始（无论是 0 还是 1）。此示例从 1 开始。如果您想从 0 开始，则通过减去 1（索引号）将其移入。

Answer 2

这样的？

var cells = document.querySelectorAll('.container').children(),
    container_width = 1200,
    cell_width = 200,
    total_cols = container_width/cell_width,

    calculateCoords = function (index) {
        return coords {
            col: index%total_cols,
            row: Math.ceil(index/total_cols)
        };
    };

//EXAMPLE USAGE FOR CELL INDEX = 3;
var index_3_coords = calculateCoords(3);
console.log(index_3_coords); //{ col: 3, row: 1 }