Creating two rows with wookmark

Question

I am trying to implement the wookmark js in my design for a pinterest like layout. But instead of the usual single instance of wookmark in a page, I need it to be applied twice on the page. But I am having an issue. When the first row gets arranged, it is pushing the second row too much down with an empty space in between them.

You can see the blank white space between the red and blue rows.

You can see the blank white space between the red and blue rows. I want the blue row to start immediately below the red one.

Here is my fiddle. 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
});

Any idea friends?

@JoshCrozier : but its not working when I have some normal text in between the rows. Please see http://jsfiddle.net/ynzqo542/ — Mic, Aug 31 '14 at 20:44

score 1 · Accepted Answer · answered Aug 31 '14 at 21:12

The problem is that each instance is sharing a common container element. It doesn't appear that wookmark was design to handle cases like this. Without changing the HTML, one possible solution would be to loop through the .wookmark elements and capture the context of its parent element and pass that as the container element like this:

Updated Example Here

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

Creating two rows with wookmark

1 Answers1