javascript - 用wookmark创建两行

我试图在我的设计中实现类似pinterest布局的wookmark js。但我需要在页面上应用两次wookmark，而不是页面中通常的一个wookmark实例。但我有个问题。当第一行被安排好时，它把第二行推得太低，中间有一个空的空间。
您可以看到红色和蓝色行之间的空白空白。我要蓝色的那排马上从红色的那排下面开始。
这是我的小提琴。http://jsfiddle.net/u3ndne03/1/
HTML格式

<div class="wookmark">
    <div class="singleitem red">s</div>
    <div class="singleitem red">s</div>
    <div class="singleitem red">s</div>
    <div class="singleitem red">s</div>
    <div class="singleitem red">s</div>
</div>

<div class="wookmark">
    <div class="singleitem blue">s</div>
    <div class="singleitem blue">s</div>
    <div class="singleitem blue">s</div>
    <div class="singleitem blue">s</div>
    <div class="singleitem blue">s</div>
</div>

CSS

.wookmark {
    position: relative; /** Needed to ensure items are laid out relative to this container **/
    margin: 0;
    padding: 0;
}
.singleitem{
    border:1px solid #000;
    background:red;
    width:60px;
    height:60px
}
.red {
    background:red;
}
.blue {
    background:blue;
}

JS公司

$('.wookmark .singleitem').wookmark({
    autoResize: true, // This will auto-update the layout when the browser window is resized.
    container: $('.wookmark'), // Optional, used for some extra CSS styling
    offset: 5, // Optional, the distance between grid items
    itemWidth: 60, // Optional, the width of a grid item
});

有什么好朋友吗？

最佳答案

问题是每个实例共享一个公共容器元素。看来伍克马克并不是为处理这样的案件而设计的。在不更改HTML的情况下，一种可能的解决方案是循环遍历.wookmark元素并捕获其父元素的上下文并将其作为容器元素传递，如下所示：
Updated Example Here

$('.wookmark').each(function () {
    var parent = $(this).closest('.wookmark');
    $(this).find('.singleitem').wookmark({
        autoResize: true,
        container: parent,
        offset: 5,
        itemWidth: 60,
    });
});