1

我正在使用 ajax 调用获取链接，并且内容是动态的。

我想让链接流动：10个链接从上到下，其他10个链接进入一个新列等。

我需要一些看起来像这样的东西：http: //jsfiddle.net/89JKM/18/，但这可以跨浏览器工作。此外，如果数字或链接是例如 15，那么 10 的第一列应该在它用 5 填充第二列之前填满，并将最后一列留空。我相信 jQuery 脚本可以解决问题，或者如果有一些很酷的 CSS 魔法。

4

1 回答 1

2

好吧，这是一种方法：

function cssSupportFor(prop) {
    if (!prop) {
        // you have to supply a property to test
        return false;
    }
    else {
        var styles = document.body.style;

        // testing for native support:
        if (prop in styles) {
            // returns the property
            return prop;
        }
        else {
            // tests for vendor-prefixed support:
            var vendors = ['Moz', 'Webkit', 'Ms', 'O'],
                // upper-cases the first letter of the property for camel-casing
                Prop = prop[0].toUpperCase() + prop.substring(1);
            for (var i = 0, len = vendors.length; i < len; i++) {
                if ((vendors[i] + Prop) in styles) {
                    // returns the vendor-prefixed property
                    return vendors[i] + Prop;
                }
                else if (i == (vendors.length - 1)) {
                    // if no vendor-prefixed support, or native support, returns false
                    return false;
                }
            }
        }
    }
}

// if there's support for the tested property then it's implemented here
if (cssSupportFor('columnCount')) {
    var prop = cssSupportFor('columnCount');
    $('#linklist')[0].style[prop] = 3;
}
// otherwise the following jQuery kicks in to achieve much the same
else {
    var aElems = $('#linklist a'),
        cols = Math.ceil(aElems.length / 10);

    for (var i = 0, len = cols; i < cols; i++) {
        var d = $('<div />', {
            'class': 'col'
        }).appendTo('#linklist');
        $('#linklist > a:lt(10)').appendTo(d);
    }
}​

JS 小提琴演示。

参考：

于 2012-06-10T17:30:35.250 回答