链接列表拆分为列

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()。