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将是动态的，我不能指望它们以任何特定的顺序流入，这就是我转向使用砌体的原因。它们最终将成为博客文章，用户可以指定他们是希望它是大块还是小块，然后它们将按日期顺序排序＆amp;当然是大小（这篇文章的内容）。

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>