调整大小时没有延迟的砌体效果

Question

TL; DR：请参阅this fiddle - 几乎所有我正在寻找的是一个JavaScript doohickey，它可以修复浮动元素之间的间隙，例如这些，在调整大小时没有延迟现有的图书馆有。

更长的版本：据我所知，有两个主要的库用于创建紧密结构元素的墙; Masonry和Isotope。

然而，除了可疑的类似网站之外，这两个库在使用流体/响应元素调整视口大小时具有相同的怪异性。每个砌体元素首先单独调整大小（创建更大的排水沟），然后稍后节拍，重新安排到新形式。见here或here。

似乎我是唯一一个认为这很难看的人。

我如何实现相同的砌体效果，但是考虑到以百分比形式设置的元素宽度和排水沟，更多“本机”外观调整（即没有延迟的那个）？

这是我现在拥有的CSS：

#wrapper {
    width: 100%;
    overflow: hidden;
}

#wrapper > div {
    width: 46%;
    margin: 0 2% 15px;
    float: left;
}

Answer 1

http://jsfiddle.net/UTB5C/3/

调整窗口大小后砌成选定元素的结果有点搞笑，所以我在窗口上添加了一个resize事件，以便在窗口调整大小时重新加载

$(function () {

    $('#wrapper').masonry({
        itemSelector: 'div',
        isResizable: true,
        gutterWidth: 5
    });
    $(window).on("resize", function () {
            $('#wrapper').masonry('reload')
    });

});