Javascript 基于筛选后不起作用的索引的自定义排序

这个问题是这个问题的后续问题：

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

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

这是一把小提琴，在点击角印时添加了一个基本过滤器：

---

请注意，单击要过滤的角戳记后，单击图元11或15时，布局再次出现间隙

这里有一个解决方案：

编辑：

固定答案：

问题就在这里：

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

那是因为

• 当我们有所有的盒子时，盒子1的索引是0，盒子2的索引是1，盒子3的索引是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:

你还记得我发现它有一个bug吗：框编号13,17,21（在行的末尾），当单击时，它们转到下一行，而不是它的行的开头；所以我把它修好了

但在那之后，我们似乎有了一个遗憾，固定的排序逻辑被旧的逻辑所取代

所以我把你的头发修好了

固定排序逻辑为：

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

---

我担心会是这样的，有没有办法用动画来破坏？@BorisKourt你说的“用动画”是什么意思？无论如何，我想我帮不了你更多，因为我不习惯jQuery，更不用说同位素了。我可以通过直觉，查看同位素的网页和一些测试，找到上面答案的代码。但我不能帮你了解那个图书馆的深度…嗯，没关系，这将暂时起作用，所以我将把它标记为已回答。我所说的动画是指同位素瞬间转变成一组新的元素。通常，过滤时，它会随着动画淡出未使用的内容。再次感谢您的帮助。：）@BorisKourt我找到了问题所在，修复于此：@BorisKourt别提了。但我发现我们有一个后悔的错误，我修正了你的错误

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