包装/同位素网格未按预期重新排列答案

【问题标题】：packery / isotope grid not rearranging as expected包装/同位素网格未按预期重新排列
【发布时间】：2015-01-21 15:18:37
【问题描述】：

我已经玩了几个小时的砖石、同位素和包装工，但我这辈子都无法让它按预期工作。

我的目标是创建一个帖子网格，帖子可以是两个宽度，父容器的 25% 或 50%。帖子的宽度是在服务器端随机生成的。但是，在某些情况下，第一行包含一个很大的间隙，一个帖子可能适合为了更好地说明这一点，我整理了一个小提琴

HTML

<div id="container" class="packery" style="width: 100%">
<div class="grid-sizer"></div>
<div class="item w" style="background-color:#aaa;"></div>
<div class="item w2" style="background-color:#ff0000; width:25%;"></div>
<div class="item w" style="background-color:#00ff00; width:50%;"></div>
<div class="item w" style="background-color:#affaff; width:50%;"></div>

docReady( function() {
var $container = jQuery('#container');
$container.packery({
  itemSelector: '.item',
  scolumnWidth : ".grid_sizer"
});

});

以及我正在尝试的一个完整的小提琴 http://jsfiddle.net/nLqu015m/

在上述情况下，我希望 packery 重新排列元素，以便红色元素是最后一项，在最后一项之前的行中没有难看的间隙。

我也尝试在 Isotope 中实现相同但面临同样的问题。

我是否遗漏了一些明显的东西，或者我误解了 Packary 和 Isotope 的用途？

任何帮助将不胜感激。

【问题讨论】：

标签： jquery jquery-isotope jquery-masonry masonry packery

【解决方案1】：

这在你的小提琴中不起作用，因为你没有加载同位素。

【讨论】：