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.

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

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

回答1:

here you have the solution: 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 answer: http://jsfiddle.net/zewkG/16/

The problem was here:

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

It should be:

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

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

becomes

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

That's because

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.

Finally,

$('.corner-stamp').click( function() {
    $container.isotope( 'destroy' );
    grid('.item.odd');
    $('.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.

Edit 2:

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.

So I fixed your http://jsfiddle.net/zewkG/19/ in http://jsfiddle.net/zewkG/20/

The fixed sorting logic is:

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

来源：https://stackoverflow.com/questions/11977800/isotope-custom-sorting-based-on-the-index-not-working-after-a-filter

标签

javascript

jquery

jquery-isotope