5

如果我有一个宽度为 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 开始的项目索引；

4

2 回答 2

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

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

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

于 2013-03-19T21:28:10.500 回答
5

像这样的东西？

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 }
于 2013-03-19T21:29:21.737 回答