jQuery插件同位素沒有正確重新排列項目

Question

我在我的一個項目中使用同位素，出於某種奇怪的原因，我無法像demo那樣工作（點擊元素＃26 Iron，你會注意到＃30鋅向上移動以填充大塊將留下的空白空間）。

這是jsfiddle of where im at。請注意，當您單擊類別2時，類別3和4應該有兩個黑色空格。

這裏是我的同位素JS：

$(document).ready(function() { 
    var $iContainer = $('#ls-container'); 

    $iContainer.isotope({ 
    itemSelector : '.ls-item', 
    layoutMode : 'masonry', 
    masonry : { 
     columnWidth : 170 
    } 
    }); 

    $iContainer.delegate('.ls-item', 'click', function() { 
    $(this).addClass('large-item').siblings().removeClass('large-item'); 
    $iContainer.isotope('reLayout'); 

    }); 

});​ 

Answer 1

你所看到的差距是多麼的砌體佈局算法的作品。 See Masonry issue #141。

但我們可以通過使用排序來破解這個。見this fiddle。該技術類似to this article

$iContainer.isotope({ 
    itemSelector : '.ls-item', 
    layoutMode : 'masonry', 
    masonry : { 
    columnWidth : 170 
    }, 
    getSortData: { 
    largeFirst: function($elem) { 
     var isLarge = $elem.hasClass('large-item'); 
     var index = $elem.index(); 
     return isLarge ? index - index % 3 - 0.5: index; 
    } 
    } 
}); 

$iContainer.delegate('.ls-item', 'click', function() { 
    $(this).addClass('large-item').siblings().removeClass('large-item'); 
    // update sortData for all items 
    $iContainer.isotope('updateSortData', $iItem) 
     .isotope({ sortBy: 'largeFirst' }); 

});