具有砌体的动态响应网格

Question

我希望有一个带有块的2列页面，点击后可以“打开”，请参阅http://jsfiddle.net/pdjpdwLe/2/。

.item {
   float: left;
   width: 50%;
   height: 100px;
   margin-bottom: 5px;
}

.item.open {
   height: 300px;
}

目前我正在使用砌体，它工作得非常好，但我想阻止这些项目更改列。例如，如果我单击左上方的块，它会展开，但下面的块会移到右列。

$("#masonry").masonry({
    itemSelector: ".item"
});

$(".item").click(function() {
    $(this).toggleClass("open");

    $("#masonry").masonry({
        itemSelector: ".item"
    });
});

是否可以在块中始终向下移动块？

不必使用砌体插件，我知道可以有一些内部逻辑用于重新排列块，无法更改。