javascript - 砌体重新排序表现得很奇怪

Question

我是第一次使用砌体http://masonry.desandro.com/

我已经完成了所有设置，它似乎大部分都能正常工作，但是当拖入它时，它似乎会在放置框的位置做出奇怪的选择。

我的意思是我可能有一个中等大小的物体，然后是一个小物体，然后是一个中等大小的物体，然后是另一个小物体

当我放大而不是将介质放在顶行时，两个小的彼此相邻放在下一行，另一个介质放在底部它保持顺序，这使得整个事情变得毫无意义。

这是一把 fiddle http://jsfiddle.net/danwhitmarsh/zgjBy/

在那个 fiddle 上使结果和 javascript 之间的栏越来越大，这将变得很明显

这里是一些示例代码

html

<main id="main" class="js-masonry" data-masonry-options='{ "columnWidth": 320, "itemSelector": ".module","isFitWidth": true }'>
    <!-- INTRO MODULE -->
    <div class="module med-width med-height">

    </div>
    <!--EXAMPLE OF SMALL SMALL MODULE-->
    <div class="module sml-width sml-height">

    </div>

    <!--EXAMPLE OF MEDIUM SMALL MODULE -->
    <div class="module med-width sml-height">

    </div>

    <!--EXAMPLE OF SMALL SMALL MODULE-->
    <div class="module sml-width sml-height">

    </div>

</main>

和一些CSS

    * {
    padding:0px;
    margin:0px;
    font-family: Arial;
}



#main{
    width: 100%;
    overflow: hidden;
    margin: 0 auto;
}

.sml-width {
    width: 320px;
    background-color:#ccc;
}
.med-width {
    width: 640px;
    background-color:#000;
}
.sml-height {
    height: 320px;
    background-color:#ccc;
}
.med-height {
    height: 640px;
    background-color:#000;
}

任何人都可以帮忙 - 我错过了一个设置吗？

Answer 1

在与作者交谈后，他向我推荐了他拥有的另一种产品

http://packery.metafizzy.co/

这似乎运作良好。它实际上可以将 block 放入砌体没有做的缺失空间中。

谢谢

丹