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

如果我有一个宽度为1000px的容器，里面装满了所有宽度为200px的物品。如何计算平铺的行/列位置

要更详细地解释：

我所知道的唯一变量是容器的宽度（在上面的示例中为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开始

以（行宽度）/（元素宽度）为底，找出一行中适合的元素数

将给定的索引号除以每行的元素数（您刚刚计算出来）。这将为您提供行位置

接下来，通过从步骤1中获取剩余部分来查找列位置（可以使用模数）。将余数乘以每行的元素数。这将是它所在的列

示例：每行3个元素，第4个元素： 楼层（4/3）=1（第1排） 余数=（4%3）=1（列位置）

请注意您开始使用的索引（无论是0还是1）。这个例子从1开始。如果你想从0开始，通过减去1（索引号）来移动它。

类似的事情

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 }

---

你在用什么HTML和CSS？你能不能把你试过的东西和它不起作用的方式/原因都写进去？@DavidThomas HTML/CSS与这个问题基本无关，我要的纯粹是数学。我只需要了解如何通过索引计算项目的行/列。如果有帮助，所有项目都是固定宽度（200px）和（显示：内联块）。容器的宽度将发生变化，但在执行行/列计算之前，我将始终更改容器的宽度。@JamesMontagne我尝试了几个粗略的公式，但没有一个是正确的。数学对我来说是个真正的弱点。我已经使用下面的公式Math.ceil（index/columnstotal）获得了行，columnstotal的计算如下：Math.floor（containerwidth/itemwidth）。虽然我还没有用大量的项目来测试它。它是什么意思？若你们不知道盒子的高度，你们不能定义6后的单元格。太好了！非常感谢。我似乎非常接近，但这已经完成了技巧：）应该是

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

第一步使用地板，第二步使用ceil。对我来说，这个示例不太容易理解，JavaScript中的问题以及示例中的问题也应该是，使用变量和语句，而不是一行文字描述。感谢代码示例。这个做得很好。不幸的是，user829323以几分钟的优势击败了你，我已经给了他答案。我希望你不介意。干杯我会注意到，这里使用的ceil是有效的，我必须在接受ceil答案的第二步改变地板，以使该答案起作用。这是比较正确的答案。