1

ajax呼び出しでリンクをフェッチしていますが、コンテンツは動的です。

リンクをフローにしたい：10個のリンクの場合は上から下へ、他の10個のリンクの場合は新しい列へ。

http://jsfiddle.net/89JKM/18/のようなものが必要ですが、クロスブラウザで機能します。また、数またはリンクがたとえば15の場合、10の最初の列は2番目の列を5で埋める前に埋め、最後の列は空のままにする必要があります。jQueryスクリプトでうまくいくか、CSSの魔法があればいいと思います。

4

1 に答える 1

2

さて、ここに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フィドルデモ。

参照：

于 2012-06-10T17:30:35.250 に答える