javascript - 如何在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

将列容器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 上对其进行测试