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

Question

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

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

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

Answer 1

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

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

然后使用 jquery $("#mymarker") 获取该范围并获取“left”属性。将该数字除以列的宽度（根据列间隙进行调整），这将告诉您最后一个元素位于哪一列。对该值进行 Math.ceil() ，您就可以得到列数。

Answer 2

将列容器的可滚动宽度除以可见宽度：

container.scrollWidth / container.offsetWidth

Answer 3

试试这个：

$.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 4

您可以为每一列设置一个类，例如 class="another-column"，然后使用 Jquery 选择类并迭代它们。

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

警告，这未经测试。如果你可以提供一些 html/css3 代码我可以在 jsfiddle 上测试它