Masonry.js 两列布局，“提升”不同大小的块

Question

背景

我使用 Masonry.js 只是因为我相信这将是实现此效果的最简单方法。它甚至可能不是适合这项工作的工具。

我想要完成的事情

我正在构建一个包含 2 个不同大小的“块”的两列布局。其中之一是一个大块，宽度为 60%，高度为 200px。小块的宽度为 40%，高度为 100px。

我想要实现的是块流入布局，其中在任何给定时间都有一个大块（左侧或右侧）和一个大块的右侧或左侧有 2 个小块。

如果 HTML 不是这样排序的，我希望它“提升”小块以填补可能存在的任何空白。

我目前的 jsFiddle 很好地传达了这一点（我希望！）。

我的代码

我的 HTML 看起来像这样

<div class="grid">
    <div class="grid-item">1</div>
    <div class="grid-item item2">2</div>
    <div class="grid-item item2">3</div>
    <div class="grid-item item2">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item item2">7 (should be under 4)</div>
    <div class="grid-item item2">8 (should be above 9)</div>
    <div class="grid-item item2">9 (should be under 8)</div>
    <div class="grid-item">10</div>
</div>

.grid-item { width: 60%; height: 200px; } 和.item2 { width: 40%; height: 100px; }

我的 Masonry.js 插件初始化代码如下所示：

$('.grid').masonry({
    itemSelector: '.grid-item',
    columnWidth: 1
});

---

问题

所以最终的问题是小块没有被提升来填补空白（在 #5 的左侧，大块）。

更多背景

因为这些grid-item 将是动态的，我不能指望它们以任何特定的顺序流动，这就是我转向使用 Masonry 的原因。它们最终将是博客文章，用户可以指定他们希望它是大块还是小块，然后它们将按日期顺序和当然大小（这篇文章的主题）排序。

Answer 1

如果你想要排序，简单的逻辑就可以做到。结合 DOM 操作，你会得到：

var grid = document.getElementsByClassName('grid')[0];

for(var i = 0; i < grid.children.length - 1; i++) { // iterate over children except last
  var find = [2, grid.children[i].classList.contains('item2') ? 1 : 2]; /* depending on
    current item type, looking for items [2, 1 or 2] in that order. */
  for(var f  = 0, j = i + 1; f < 2 && j < grid.children.length; j++) { /* iterate over
      all children starting after i, or until found 2 items */
    var child = grid.children[j];
    var item = child.classList.contains('item2') ? 2 : 1; // do we have 1 or 2?
    if(find[f] == item) { // is it the one we're looking for?
      if(j > i + 1) // is it ahead of where we want it to be?
        grid.insertBefore(child, grid.children[i + 1]); // Yes, so relocate...

      i++; // advance i, we moved ahead
      f++; // advance f, we found a match
      j = i; // reset j (will be j++ in the for)
    }
  }
}

<div class="grid">
    <div class="grid-item">1</div>
    <div class="grid-item item2">2</div>
    <div class="grid-item item2">3</div>
    <div class="grid-item item2">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item item2">7 (should be under 4)</div>
    <div class="grid-item item2">8 (should be above 9)</div>
    <div class="grid-item item2">9 (should be under 8)</div>
    <div class="grid-item">10</div>
</div>