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

Question

如果我有一个宽度为1000像素的容器，则装满所有宽度为200像素的物品。如何计算瓷砖行/列位置？

更详细地解释：

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

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

e.g。假设每行的最大项目值 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 }