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

How to get css3 multi-column count in Javascript

本文关键字：css3 Javascript      更新时间：2023-09-26

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

如何在Javascript中获得实际的列数作为整数?

如果我们查询css "column-count"(或-moz-column-count)，我们得到的结果要么是"auto"，要么是一个空白

秘诀是在内容的末尾放一个小标记。您可以通过编程方式添加一个空span: 

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

然后使用jquery $("#mymarker")获取span并获得"left"属性。将该数字除以列的宽度(根据列间距进行调整)，结果将告诉您最后一个元素位于哪个列。Math.ceil()的值，你有列数

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

container.scrollWidth / container.offsetWidth

试试这个:

$.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偏移量之和相减。

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

数学。必须使用Round，因为容器的大小不一定能完全被其内列的宽度整除。

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

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

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

上进行测试
相关文章：