Изотоп пользовательских сортировки на основе индекса не работает после фильтра

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')); 
}); 

Edit:

Fixed Ответ: 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; 
     } 
} 

Это потому, что

• Когда у нас есть все box, индекс 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'), потому что если мы не будем делать, что даже коробки показаны под мультипликационных нечетные коробки.

Edit 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; 
}