Jquery-Masonry几乎总是空的空间

Question

我一直在尝试砌体，但却无法按照我的意愿完成工作。我使用的元素在宽度和高度上有所不同，但都适合网格（4种不同的尺寸，所有的最小+边距的倍数）。我还计算了一个元素分布（最小的7个，其他4个）可以精确拟合。

然而，砌体能够整齐地适应它们是很少见的，有时会有一个潜伏在底部，有时几个是错位的。总是如此，在一个视图中，我可以看到需要移动哪些项目以使其适合。

有没有办法让砌体在移动元素方面更具侵略性？或者让它重复两次以确保没有空格？

Answer 1

你应该看看砖石的“大哥”同位素here。请注意，如果您的元素按特定顺序排序或按特定顺序固定 - 并且宽度超过单个列宽 - 它们可以在狭窄的浏览器宽度“阻止”列。

编辑也许this fiddle解释得更好一些。如果你看一下那个 - 并且 - 在观察div中的数字时 - 你会看到下一个砌体元素（红色元素5）不可能适合白色方块，因为它必须在元素4之后;所以它必须最终意味着，只有三排适合，一个得到一个白色的间隙。也许你可以使用Isotope的shuffle和/或reLayout方法并牺牲你的元素按严格的顺序排序？最好的将是你的问题。

<article>
  <div class="tile blue"><p>1</p></div>
  <div class="tile black"><p>2</p></div>
  <div class="tile tall yellow"><p>3</p></div>
  <div class="tile grey"><p>4</p></div>
  <div class="tile wide red"><p>5</p></div>
  <div class="tile green"><p>6</p></div>
  <div class="tile grey"><p>7</p></div>
  <div class="tile blue"><p>8</p></div>
  <div class="tile green"><p>9</p></div>
</article>

---

$('article').isotope({
    itemSelector : '.tile',
    masonry: {
        columnWidth: 100
    }
});

---

article .tile {
    display: block;
    float: left;
    box-sizing: border-box;

    width: 100px;
    height: 100px;

    font-size: 3em;
    font-weight: 700;

    padding: 0 6px;
    color: #fff;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

    border:1px dotted black;
}

article .tile.wide {
    width: 200px;
}

article .tile.tall {
    height: 200px;
}

.tile.yellow { background: yellow; }
.tile.red { background: red; }
.tile.blue { background: blue; }
.tile.black { background: black; }
.tile.grey { background: grey; }
.tile.green { background: green; }

Answer 2

为了扩展Dan的答案，我自己刚遇到这个问题，似乎Packery是更新的; much more maintained版本的Masonry - 来自同一作者。我不清楚为什么两个项目都作为单独的实体存在，后者只有拼写错误。

好消息是 - 它几乎完全是替代品。我必须进行的唯一更改（除名称masonry - ＆gt; packery使用之外）是删除选项，因为它是默认值且仅Packery中的选项。

那是isFitWidth: true，我的微弱尝试让砌体包装的东西接近于Packery在没有任何选择的情况下有多好。

Packery的另一个不错的变化是gutter: x适用于垂直排水沟和水平排水沟。在Masonry中，这只是横向的 - 尽管在CSS中使用margin-bottom是微不足道的，这感觉就像是一个不必要的黑客。