Jquery-Masonry 几乎总是空白

Question

我一直在尝试 Masonry，但无法让它完全按照我的意愿工作。我使用的元素的宽度和高度各不相同，但都适合一个网格（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->packery 使用的地方）是删除一个选项，因为它是默认且唯一的选项在Packery中。

那是isFitWidth: true，我微弱的尝试让 Masonry 打包的东西接近于 Packery 在没有任何选择的情况下的表现。

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