упаковка/изотопная сетка не перестраивается, как ожидалось

Question

Я играю с кладкой, изотопом и упаковкой в ​​течение нескольких часов и не могу на всю жизнь заставить ее работать так, как ожидалось.

Моя цель создать сетку сообщений, столбики могут быть двух ширины, 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> 

The JS

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

});

и полная скрипка, что я пытаюсь http://jsfiddle.net/nLqu015m/

В случае выше, я бы ожидать packery переставить элементы так, чтобы красный элемент был последним элементом, с нет неприглядных пробелов в строк до последнего.

Я также пытался достичь этого в Изотопе, но столкнулся с той же проблемой.

Я пропустил что-то очевидное или я не понимаю цели упаковки и изотопа?

Любая помощь будет оценена по достоинству.

Answer 1

Это не работает в вашей скрипке, так как вы не загрузили изотоп.