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

Question

<分区>

Answer 1

您的问题和 fiddle 会忽略 vendor 前缀； 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;
}