Javascript 如何找到元素的列位置？或者如何按列位置查找元素？

在网页中，我有一个元素列表。 多亏了CSS列，元素分散在多个列中

我想知道：

给定元素在哪一列中？ 给定元素是其列中的第一个元素还是最后一个元素？ 给定列中的第一个元素或最后一个元素是什么？ 我该怎么做？例如，在JavaScript中。也许在CSS选择器中

---

谢谢。

您想做的事情没有CSS机制。可能的是检查每个元素的位置，并在此基础上进行一些计算和推断。下面是一些伪代码：

获取所有li元素的列表。 检索它们的边界矩形getBoundingClientRect 同一列中的图元应具有相同的左坐标。因此，按左坐标对矩形进行分组，以创建每列的组。 现在您可以很容易地找到每个列组的第一个和最后一个元素。 要查看元素n在其列中是第一个还是最后一个，请检查其顶部坐标是否为其所在列中所有元素的最小值或最大值。 你说这太重了，让我们仔细看看。下面是查找每列中元素数量的代码。这使用下划线，但很容易进行一般性编写：

var lis = document.querySelectorAll('ul li');
var rects = _.map(lis, function(li) { return li.getBoundingClientRect(); });
var columns = _.groupby(rects, 'left');
var column_counts = _.map(columns, function(c) { return c.length; });

---

每个列中有固定数量的项吗？因为列不是元素，所以没有简单的方法来实现这一点。你需要计算尺寸并计算出每个项目的位置。一旦你知道这些问题的答案，你打算做什么？换句话说，您的高级用例是什么？您可能需要采取另一种方法，因为除了在您自己的程序中复制浏览器的列布局代码之外，您想要的东西既不能用CSS也不能用JavaScript来完成。@Salman-每列中的项目数可以是任意的，但我们可以假设，一旦加载页面，它就被修复了。但是，如果我们不这样认为，我更愿意这样做，结果会更加一致-@torazaburo—我的高级目标是防止在加载后JavaScript动态更改项目大小时，项目从一列跳到另一列。也许还有另一种方法可以实现这一点。我没有找到，谢谢。这很聪明。但是这种方法太重了。那么你有没有办法防止跳跃呢-