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

Question

长话短说:请参阅 this fiddle - 几乎所有我正在寻找的是一个 JavaScript doohickey，它可以修复这些 float 元素之间的间隙，而不会在调整现有库的大小时出现延迟。

更长的版本: 据我了解，有两个主要的库用于创建紧密结合的元素墙； Masonry和 Isotope .

但是，除了可疑的相似网站外，这两个库在使用流畅/响应式元素调整视口(viewport)大小时都具有相同的怪异之处。每个砌体元素首先单独调整大小(创建更大的排水沟)，然后在一个节拍之后，重新排列为新形式。看吧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/

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

$(function () {

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

});