如何在Javascript中获取css3多列计数

Question

我们正在使用新的 css3 多栏布局属性将我们的文本放入报纸栏。每列都有一个固定的宽度，列数默认为“auto”，这意味着浏览器决定有多少列。

我们如何在 Javascript 中以整数形式获取实际的列数？

如果我们查询 css “column-count”（或 -moz-column-count），我们会得到“auto”或空白作为结果。

Answer 1

将列容器的scrollable width 除以visible width：

container.scrollWidth / container.offsetWidth

Answer 2

试试这个：

$.fn.howMuchCols = function(){
  return Math.round($(this).find(' :last').position().left - $(this).position().left / $(this).outerWidth()) +1;
};

$('.my-stuff-with-columns').howMuchCols();

代码说明：

此代码将为每个 jQuery 元素创建一个函数“howMuchCols”。

你不能用常规的方式得到一个带有列的元素的宽度，因为他的宽度是用来定义每个内列的大小的。要知道元素里面有多少列，你需要得到他的真实宽度并除以列的大小，然后你就会得到列的数量。

得到实际宽度的方法是，将列容器的最后一个子元素的X偏移量与它的宽度相加，然后用列容器X偏移量的总和减去它。

在代码中，我在进行减法和除法之后添加了一列的大小，而不是使用除法之前的像素单位（它没有区别）。

Math.round 必须在那里，因为容器大小并不总是能被他的内列宽度整除。

Answer 3

秘诀是在内容的末尾放置一个小标记。您可以以编程方式添加一个空范围：

<span id="mymarker"></span>

然后使用 jquery $("#mymarker") 获取跨度并获取“left”属性。将该数字除以列的宽度（针对列间距进行调整），这将告诉您最后一个元素在哪一列中。Math.ceil() 对值进行计算，您就有了列数。

Answer 4

能否为每一列设置一个类，例如 class="another-column"，然后使用 Jquery 选择类并对其进行迭代。

var count = 0;
$('.another-column').each(function(){
    count++;
});

警告，这是未经测试的。如果您可以提供一些 html/css3 代码，我可以在 jsfiddle 上对其进行测试