如何根据项目索引获取网格行/列位置

Question

如果我有一个宽度为1000像素的容器，里面填充的项目都是200像素宽。如何计算这些图块的行/列位置？

更详细地解释一下：

只知道容器的宽度（如上例中的1200px），每个项目的宽度（如上例中的200px）以及项索引（从1开始）。怎样可以仅凭以上信息，使用JavaScript计算出单元格的行和列。

例如，给定每行最多6个项目（这可以从项目宽度和容器宽度轻松地计算出来），我需要能够计算出项目编号7位于第2行，第1列。

由于容器和项目的宽度可能无法完全被整除，因此方程式将不得不考虑每行末尾所需的任何额外空白，并自然地将项目包裹到下一行，就像在HTML浮动布局中一样。

提前致谢

编辑：

我已经成功通过以下方式精确获得了行：

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

这里的索引从1开始，而不是0;

- gordyr

---

你正在使用哪个版本的HTML和CSS？ - David Thomas

请问您能否包含您尝试过的内容以及为什么/如何没有成功的原因？ - James Montagne

@DavidThomas HTML/CSS对这个问题基本上没有影响，我只是需要了解如何通过索引计算项目的行/列。如果有帮助的话，所有项目都是固定宽度（200px）和（display:inline-block）。容器的宽度会改变，但在执行行/列计算之前，我总是知道该容器的宽度。 - gordyr

@JamesMontagne 我尝试了几个粗略的公式，但都不正确。数学是我真正的弱点。我已经使用以下公式获取了行数 Math.ceil(index / columnstotal)，其中columnstotal是这样计算的：Math.floor(containerwidth/ itemwidth)。虽然我还没有用大量项目测试过这个公式。 - gordyr

“items index” 是什么意思？ 如果您不知道盒子的高度，那么在 6 之后就不能定义单元格。 - inser

项索引表示从左到右的单元格索引，从1开始计数。我不需要知道高度，因为我不需要知道项目的顶部偏移量，只需要知道它所在的行。给定每行最大项目值为6，我应该能够计算出项目编号7位于第2行第1列。希望这样说得清楚。 - gordyr

Answer 1

1. 通过计算行宽除以元素宽度的底数，找出一行可以放置多少个元素。
2. 将给定的索引号除以每行元素个数（刚才计算的），得到所在行的位置。
3. 接下来通过对步骤1的余数部分取模运算，找到列位置。将余数乘以每行元素个数，即是所在列。

例如：每行3个元素，第4个元素： floor(4/3) = 1（在第1行） 余数 = (4%3)=1（在第一列）

注意从哪个索引号开始计算（是0还是1）。此示例从1开始。如果要从0开始，则需要将索引号减1。

- user829323

---

太好了！谢谢。看来我很接近了，但这个方法解决了问题 :) - gordyr

应该是：每行3个元素，第4个元素：floor(4/3) = 1（所在行数），remainder = (4%3) = 1（所在列数）, 第二步使用 ceil。 - Andrew Grothe

对我来说，我认为这个例子不太容易理解。问题是关于JavaScript的，所以例子也应该是用变量和语句来表示，而不是一个单行的文本描述。 - Luke T O'Brien

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 }

- João Paulo Macedo

---

感谢您提供的代码示例，它完美地解决了问题。不幸的是，用户829323比您早几分钟发布了答案，我已经将答案授予给他了。希望您不介意。谢谢！ - gordyr

我要注意这里使用的ceil函数是有效的，而且我不得不将第二步中的floor函数更改为ceil才能使其正常工作。这是更正确的答案。 - Andrew Grothe