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

Question

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

我们如何在 Javascript 中获取实际的列数作为 integer？

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

Answer 1

秘诀是在内容的末尾加上一个小标记。 您可以通过编程方式添加空跨度：

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

然后使用jquery $（“＃mymarker”）获取span并获取“left”属性。 将该数字除以列的宽度（针对列间距进行调整），这将告诉您最后一个元素所在的列。数值上的Math.ceil（）并且您具有列数。

Answer 2

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

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上测试它