Question

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

我们如何在Javascript中将实际列数作为整数？

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

Answer 1

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

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

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

Answer 2

试试这个：

＆＃13;

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

＆＃13;

代码说明：

此代码将创建一个函数＆＃39; howMuchCols＆＃39;每个jQuery元素。

您无法使用传统方式获取带有列的元素的宽度，因为他的宽度用于定义每个内部列的大小。要知道元素内部有多少列，您需要获得其实际宽度并除以列大小，然后您将获得列数。

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

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

Math.round必须存在，因为并不总是容器大小可以被内部列宽完全整除。

Answer 3

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

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

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

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

3 个答案: