基于索引的同位素自定义排序在过滤器后不起作用 [英] Isotope custom sorting based on the index not working after a filter

问题描述

此问题是此问题的后续内容:同位素网格+角标记去除空白处，排序逻辑

This question is a follow-up to this one: Isotope grid + corner stamp removing empty spaces, sorting logic

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

The answer there works flawlessly on the unfiltered isotope layout. Once some elements are removed though, this functionality stops working.

我想知道是否有一种很好的方法来修改上一个答案中的代码以适应此情况.

I am wondering if there is a good way to modify the code in the previous answer in order to accommodate for this.

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

Here is a fiddle with a basic filter added on click of the corner-stamp: http://jsfiddle.net/zewkG/13/

请注意，当单击角标记进行过滤后，单击元素11或15时，版式再次出现间隙.

Note when, after clicking the corner-stamp to filter, you click on element 11 or 15 the layout has gaps once again.

推荐答案

，这里有解决方案: 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:

And this way we can remove the ugly -1 we had in the sorting logic:

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 ...

• When we have all boxes, box1's index is 0, box2's index is 1, box3's index is 2...
• When we have the odd ones, box1's index is 0, box3's index is 1, box5's index is 2...

因此，我们打破了框的文本与其索引之间的对应关系，以维护排序逻辑.

So we break the correspondence between a box's text and its index in order to mantain the sorting logic.

最后，

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

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

We need $('.item:not(.odd)').css('display','none') because if we don't do that the even boxes are shown under the animated odd boxes.

您还记得我发现 http://jsfiddle.net/zewkG/8/有一个错误:框号13,17,21(在该行的末尾)，当单击时，它们转到下一行而不是其行的开头；因此我将其修复为 http://jsfiddle.net/zewkG/9​​/?

Do you remember that I found that http://jsfiddle.net/zewkG/8/ had a bug: boxes number 13,17,21 (at the end of the row), when clicked, they went to the following row instead to the beginning of its row; so I fixed it in http://jsfiddle.net/zewkG/9/?

但是在那之后，我们似乎有所改观，固定的排序逻辑被旧的取代.

But after that it seems we had a regresion and the fixed sorting logic was replaced by the old one.

所以我修复了 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;
}

这篇关于基于索引的同位素自定义排序在过滤器后不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！