鏈接列表拆分爲列

Question

我正在使用ajax調用獲取鏈接，並且內容是動態的。

我想使鏈接流：從上到下爲10個鏈接，進入一個等10個鏈接等新列..

我需要的東西，應該是這樣的：http://jsfiddle.net/89JKM/18/，而是將工作跨瀏覽器。另外，如果數字或鏈接是例如15，那麼填充第一列10應填滿第二列，然後將最後一列留空。我相信一個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()。