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

Question

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

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

该目录

<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>

JS的

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

}）;

以及我正在尝试的完整摆弄http://jsfiddle.net/nLqu015m/

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

我也试图在同位素中实现相同的目标，但面临同样的问题。

我

是否错过了一些明显的东西，或者我误解了包装和同位素的目的？

任何帮助将不胜感激。

Answer 1

这在您的

小提琴中不起作用，因为您尚未加载同位素。