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

Question

如果我有一个宽度为1000px的容器,则填充所有宽度为200px的物品.如何计算瓷砖行/列位置？

要更详细地解释:

我将知道的唯一变量是容器的宽度(上例中为1200px),项目的宽度(200px以上)和项目索引(从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行)remainder =(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 }