同位素自定义排序基于索引在过滤器后不起作用

Question

这个问题是对此问题的跟进：Isotope grid + corner stamp removing empty spaces, sorting logic

答案在未过滤的同位素布局上完美无缺。删除某些元素后，此功能将停止工作。

我想知道是否有一种很好的方法来修改上一个答案中的代码以适应这一点。

这是一个小提琴，点击角标记时添加了一个基本过滤器：http://jsfiddle.net/zewkG/13/

注意在单击要过滤的角标记后，单击元素11或15时，布局再次出现间隙。

Answer 1

这里有解决方案：http://jsfiddle.net/zewkG/14/

$('.corner-stamp').click( function() {
    $container.isotope( 'destroy' );
    grid('.item.odd');
    $container.isotope('remove', $('.item:not(.odd)') )    
    $container.isotope('updateSortData', $('.item.odd'));
});

修改

修正答案：http://jsfiddle.net/zewkG/16/

问题在于：

getSortData : {
      fitOrder : function( $item ) {
        var index = $item.index();

应该是：

getSortData : {
      fitOrder : function( $item ) {
        var index = $item.index(selector);

这样我们就可以删除排序逻辑中的丑陋-1：

if ( $item.hasClass('large')) {
      if(index>10){
          order = Math.floor((index-1) / (columns))*(columns) + 1.5;
      }else{
          order = Math.floor((index-1) / (columns-1))*(columns-1) + .5;
      }
} 

变为

if ( $item.hasClass('large')) {
      if(index>10){
          order = Math.floor((index) / (columns))*(columns) + 1.5;
      }else{
          order = Math.floor((index) / (columns-1))*(columns-1) + .5;
      }
} 

那是因为

• 当我们拥有所有方框时，box1的索引为0，box2的索引为1，box3的索引为2 ...
• 当我们有奇数时，box1的索引是0，box3的索引是1， box5的索引是2 ...

因此我们打破了一个框的文本与其索引之间的对应关系，以便保留排序逻辑。

最后，

$('.corner-stamp').click( function() {
    $container.isotope( 'destroy' );
    grid('.item.odd');
    $('.item:not(.odd)').css('display','none');   
});

我们需要$('.item:not(.odd)').css('display','none')因为如果我们不这样做，偶数框会显示在动画奇数框下面。

编辑2：

你还记得我发现http://jsfiddle.net/zewkG/8/有一个错误：盒子编号13,17,21（在行的末尾），当点击时，他们转到下一行而不是它的开头行;所以我在http://jsfiddle.net/zewkG/9/修复了它？

但在那之后，似乎我们有一个回归，固定的排序逻辑被旧的替换。

所以我在http://jsfiddle.net/zewkG/19/

中修复了http://jsfiddle.net/zewkG/20/

固定排序逻辑是：

if ($item.hasClass('large')) {
    if(index>10){
        order = Math.floor((index-1) / (columns))*(columns) + 1.5;
    }else{
        order = Math.floor((index) / (columns-1))*(columns-1) + .5;
    }
}else {
    order = index + 1;
}