jquery 동위 원소 공백

Question

현재 jquery 동위 원소로 실험 중이지만 항목을 정렬하는 방법에 문제가 있습니다.

내 현재 스크립트 here을 보여줌으로써 설명하는 것이 가장 좋습니다.

두 번째 상자를 클릭하면 더 넓어지고 녹색으로 바뀝니다. Thats good,하지만 지금은 첫 번째 줄 다음에 첫 번째 줄에 큰 차이가 있습니다. 제가하고 싶은 것은 그 빈 공간을 다른 작은 상자들 중 2 개 (선호 3과 4)로 채우는 것입니다.

모든 빈 공간을 채우려면 어떤 종류의 트릭이 있습니까? 만약 누군가가 올바른 방향으로 찔러 주면 나는 많은 의무를지게 될 것입니다. :-)

$(function(){ 
var $container = $('#container'), 
    $items = $('.item'); 

$container.isotope({ 
    itemSelector: '.item', 
    layoutMode : 'fitRows', 
masonry: { 
    columnWidth: 30 
    }, 
resizesContainer : true, 
getSortData : { 
    fitOrder : function($item) { 
     var order, 
     index = $item.index(); 

     if ($item.hasClass('large') && index % 2) { 
     order = index + 1.5; 
     } else { 
     order = index; 
     } 
     return order; 
    } 
    }, 
    sortBy : 'fitOrder' 
}); 


    $items.click(function(){ 
    var $this = $(this); 
    // nothing to change if this already has large class 
    if ($this.hasClass('large')) { 
     return; 
    } 
    var $previousLargeItem = $items.filter('.large'); 

    $previousLargeItem.removeClass('large'); 
    $this.addClass('large'); 
    $container 
     // trigger layout and sort 
     .isotope(); 
    }); 
}); 

Answer 1

잘못된 레이아웃 모드입니다. masonryHorizontal을 사용하고 컨테이너 높이를 높이면 훨씬 더 좋아 보입니다! getSortData를 제거 했으므로 필요하지 않습니다. 빠른 회신 http://jsfiddle.net/D87X8/5/

$(function() { 
    var $container = $('#container'), 
     $items = $('.item'); 

    $container.isotope({ 
     itemSelector: '.item', 
     layoutMode: 'masonryHorizontal', 
     masonry: { 
      columnWidth: 30 
     }, 
     resizesContainer: true 
    }); 


    $items.click(function() { 
     var $this = $(this); 
     // nothing to change if this already has large class 
     if ($this.hasClass('large')) { 
      return; 
     } 
     var $previousLargeItem = $items.filter('.large'); 

     $previousLargeItem.removeClass('large'); 
     $this.addClass('large'); 
     $container 
     // trigger layout and sort 
      .isotope(); 
    }); 
});