Question

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

我想让链接流动：10个链接从上到下，以及其他10个链接等的新列。

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

Answer 1

嗯，这是一种方法：

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 Fiddle demo

参考文献：

jQuery的：
- appendTo()。
- :lt() less-than selector。
'普通'/原生JavaScript（全部来自Mozilla Developer Network）：
- CSSStyle declaration。
- element.style。
- Math.ceil()。
- string.substring()。
- string.toUpperCase()。

链接列表分为列

1 个答案: