同位素分選

Question

我有一個jsfiddle設置了同位素插件，我試圖添加排序功能，以便當您點擊排序鏈接時，具有該類的元素被帶到頂部，但是其他人不隱藏。

有誰知道如何將排序代碼添加到此？

FIDDLE

$(document).ready(function() { 
    var classes = ["width2", "height2", "width2height2", ]; 
    var $container = $('#container'); 

    // add randomish size classes 
    $container.find('.element').each(function() { 
     $(this).addClass(classes[~~ (Math.random() * classes.length)]); 
    }); 
}); 

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

    $container.isotope({ 
     itemSelector: '.element', 
     masonry: { 
      columnWidth: 120 
     } 
    }); 
}); 

Answer 1

看一看這些Isotope Sorting Docs

你可以做這樣的事情（未經證實）

<div class="element car" data-category="ferarri"> 

，並在你的代碼

... 
getSortData : { 
    category : function ($elem) { 
    //Returns 1 for when it matches, 0 otherwise 
    return $elem.attr('data-category')==($('#sorts .selected').html()); 
    } 
} 

$('#sorts a').click(function(){ 
    var sortName = $(this).html(); //e.g. 'Ferarri' 
    $('#container').isotope({ sortBy : 'category'}); 
    return false; 
}); 

其他注意事項

• 不需要（即，不應該）在HTML標記中的每個元素上添加'isotope-item'類。在一些更復雜的情況下（延遲加載等），會導致問題。
• 我不是認爲你的嵌套div將在一個同位素容器內工作。 （我可能是錯的） - 我不確定在應用上述內容後你甚至會需要它們。