Список ссылок, разделенных на столбцы

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.
• 'Plain'/родной JavaScript (все из Mozilla Developer Network):
  • CSSStyle declaration.
  • element.style.
  • Math.ceil().
  • string.substring().
  • string.toUpperCase().