2

我正在尝试在我的设计中实现 wookmark js，以实现类似 pinterest 的布局。但不是页面中通常的单个 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
});

有想法的朋友吗？

4

1 回答 1

1

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

此处更新示例

$('.wookmark').each(function () {
    var parent = $(this).closest('.wookmark');
    $(this).find('.singleitem').wookmark({
        autoResize: true,
        container: parent,
        offset: 5,
        itemWidth: 60,
    });
});
于 2014-08-31T21:12:11.633 回答