获取由css column-width创建的列数

问题描述

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

I have a long dynamic text which is going to be split into columns by using CSS

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

是否可以创建多少列？我在客户端使用jQuery。

Is it possible to get how many columns are created? I'm using jQuery in the client side.

推荐答案

larssin的回答是一个很好的方向，但是不完整。

Your questions and fiddle ignore vendor prefixes; larssin's answer is a good direction but isn't complete.

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

I created a small helper function for you, which goes over currently implemented prefixes for these values, fetches the actual values with .css() and returns the correct number. Works cross-browser, including non-supporting browsers which always return 1.

我选择忽略iframe的情况，这只是使事情更复杂，

I chose to ignore the iframe case, which just makes things more complicated but as I understand isn't related directly to your question.

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

Update: Now accounts for border and padding.

，其中：

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

这篇关于获取由css column-width创建的列数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！