wookmark를 사용하여 두 행 만들기

Question

저는 레이아웃과 같은 pinterest 디자인을 위해 wookmark js를 구현하려고합니다. 하지만 페이지에서 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 
}); 

모든 IDE 친구?

Answer 1

문제는 각 인스턴스가 공통 컨테이너 요소를 공유하고 있다는 것입니다. wookmark가 이와 같은 경우를 처리 할 수있는 디자인 인 것은 아닙니다. 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, 
    }); 
});