获取由css列宽创建的列数

Question

可能重复:
如何在Javascript中获取css3多列计数

我有一个很长的动态文本,将使用CSS将其拆分为列

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

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

Answer 1

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

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

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

更新:现在考虑边框和填充.

关于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;
}