Question

可能重复：
How to get css3 multi-column count in Javascript

我有一个很长的动态文本，它将使用CSS

拆分成列

div
{
    -moz-column-width: 500px;
    -moz-column-gap: 20px;
}

是否可以获取创建的列数？我在客户端使用jQuery。

Answer 1

您的问题和小提琴会忽略供应商前缀; larssin的回答是一个很好的方向，但还不完整。

我为你创建了一个小帮助函数，它覆盖了当前为这些值实现的前缀，用.css()获取实际值并返回正确的数字。跨浏览器工作，包括总是返回1的非支持浏览器。

我选择忽略iframe案例，这会让事情变得更复杂，但据我所知，这与你的问题没有直接关系。

更新：现在考虑边框和填充。

Code on jsFiddle和此处：

function getColumnsNumber(el){
    var $el = $(el),
        width = $el.innerWidth(),
        paddingLeft, paddingRight, columnWidth, columnGap, columnsNumber;

    paddingLeft = parseInt( $el.css('padding-left'), 10 );
    paddingRight = parseInt( $el.css('padding-right'), 10 );

    $.each(['-webkit-','-moz-',''], function(i, prefix){
        var _width = parseInt( $el.css(prefix+'column-width'), 10 );
        var _gap =   parseInt( $el.css(prefix+'column-gap'), 10 );
        if (!isNaN(_width)) columnWidth = _width;
        if (!isNaN(_gap))   columnGap = _gap;
    });

    columnsNumber = Math.floor( (width - paddingLeft - paddingRight) / (columnWidth + columnGap) );
    if (isNaN(columnsNumber) || columnsNumber < 1) columnsNumber = 1;
    return columnsNumber;
}

Answer 2

如果列位于不同的元素中，您可以使用$（selector）。length（http://api.jquery.com/length/）获取子节点数。不确定我是否正确理解你的问题，但希望它会有所帮助。

一个例子：

<div id="myText">
    <div class="column">some text...</div>
    <div class="column">some text...</div>
    <div class="column">some text...</div>
</div>

var columns = $('#myText').length;
    /* or */
var columns = $('.column').length;

更新

好的，我查看了你的jsfiddle示例，并认为你可以使用$（'＃test'）。width（）得到iframe的结果宽度，然后计算列数：

var width = $('#test').width();
var columns = width/(columnWidth+columnsGap);

获取由css列宽创建的列数

2 个答案:

更新