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

时间:2013-10-09 05:37:08

标签: javascript jquery css jquery-masonry

我第一次使用砖石http://masonry.desandro.com/

我已经完成了所有设置并且它似乎主要工作但是当它拖动它似乎在它放置框的位置做出奇怪的选择。

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

当我缩放而不是将介质放在顶行时,两个在下一行上彼此相邻,而另一个在底部的中等,它保持顺序,这使得整个事情毫无意义。 / p>

这是一个小提琴http://jsfiddle.net/danwhitmarsh/zgjBy/

在那个小提琴上使结果和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;
}

任何人都可以提供帮助 - 我错过了一个设置吗?

1 个答案:

答案 0 :(得分:0)

在与作者交谈后,他告诉我他有另一种产品

http://packery.metafizzy.co/

这似乎运作良好。它实际上适合于砌块没有做到的空间。

由于