javascript - 通过使用 jQuery 重新排序元素来模拟 CSS Column 垂直内容流？

Question

我有一个包含大约 50 个 li 元素的无序列表，它显示在四列网格中，并添加了媒体查询，这些媒体查询以不同的宽度更改列数。

为了支持 IE8 和 9，我使用后备 CSS 和 Modernizr 将 li 元素向左浮动并指定模拟 CSS 列布局的宽度和边距。

唯一的区别是元素是水平流动的而不是垂直流动的。

我想对 $('.main-index li') 数组执行某种“网格排序”重新洗牌，以便 li 元素按 1 这样的顺序运行， 14,27,40,2,15,28,41,3... 而不是 1,2,3,4,5,6,7,8...

我还没有走多远，但这就是我所做的开始......

if (!Modernizr.csscolumns) {

    // If CSS Columns is not supported, re-order li elements 
    // instead of 1,2,3,4,5,6,7,8... reorder to 1,14,27,40,2,15,28,41,3...

    var columnCount = $('.main-index li').css('column-count'); // = 4
    var itemCount = $('.main-index li').length; // = 50
}

我包含了一个 jsFiddle here我用来测试的。

Answer 1

这够好吗？

$( document ).ready(function() {
  // If CSS Columns is not supported, re-order li elements 
  // instead of 1,2,3,4,5,6,7,8... reorder to 1,14,27,40,2,15,28,41,3...
  var items = $('.main-index li');
  var columnCount = $('.main-index ul').css('column-count'); // = 4
  if ( typeof columnCount != 'number' ) {
    columnCount = 4;
  }
  var itemCount = items.length; // = 5

  function reflow() {
    var rowCount = Math.ceil(itemCount / columnCount);
    items.detach();
    $('.main-index ul').empty(); // Prevent build-up of dummy items
    for (var row = 0; row < rowCount; row++) {
      for (var column = 0; column < columnCount; column++) {
        var index = row + (column * rowCount);

        if ( index >= itemCount ) {
          $('.main-index ul').append('<li class="dummy">');
        } else {
          $('.main-index ul').append(items[index]);
        }
      }
    }
  }

  $(window).on('resize', function() {
    var newColumnCount = $('.main-index ul').css('column-count'); // = 4
    if ( typeof newColumnCount != 'number' ) {
      newColumnCount = 4;
    }
    if ( newColumnCount != columnCount ) {
      columnCount = newColumnCount;
      reflow();
    }
  });
});