Isotop Grid Layout Probleme nach Filter

Question

Ich habe Probleme, eine gute Lösung zu finden, die sich mit Isotopen, Filtern und einem Gitter beschäftigt. Das Problem ist immer dann, wenn Filterung an meinen Elementen stattfindet, Isotope verwendet, was übrig bleibt, um das Layout des Gitters zu bestimmen (basierend auf dem CSS). Wenn also unsichtbare Elemente zwischen sichtbaren eingeklemmt sind, dann gehören zu den n-ten Kind-Selektoren, die das Gitter stylen, diejenigen, die den tatsächlichen Stil der Elemente verzerren. Hier ist ein Video dieses Problems in Aktion: http://3cd.co/172n1C2f2k17

So habe ich zum Beispiel 6 Artikel, wenn Artikel # 2 entfernt wird, sollte Artikel # 2 # 2 und der Rest entsprechend anpassen. Die einzige Möglichkeit, dies zu erreichen, besteht darin, die unsichtbaren Elemente physisch bis zum Ende zu bewegen, damit sie das Styling der sichtbaren Elemente nicht beeinflussen. Dann muss ich sie zurücksetzen, wenn alles neu sortiert ist.

Ich denke, vielleicht ist das, was ich habe, meistens ein Event-Problem. Das einzige Ereignis, das ich finden konnte, um dieses arrangeComplete zu beheben. Das Problem ist, Isotope hat sein Layout bereits zu diesem Zeitpunkt bestimmt und es löst das Problem nicht, also muss ich $archive_grid.isotope('layout') ausführen, was großartig funktionieren würde, außer dass es zu schnell passiert und das Layout einfach verrückt wird (siehe hier) : http://3cd.co/023R2e0i2d3n). Also musste ich ein Timeout hinzufügen, um das Ereignis zu verzögern.

Hier ist der jsfiddle: https://jsfiddle.net/cfpjf5c7/

Gibt es einen besseren Weg, dies zu umgehen? Ich habe damit gekämpft und kann keine Lösung finden.

Das ist mein behelfsmäßigen, etwas Arbeitslösung, aber nicht glücklich mit:

http://3cd.co/0F3h1V1x0P0P

dies der Hauptcode hierfür ist (in dem Dokument bereit Ereignis):

// Set an initial index for each element to retain their order 
$('.archive-contents > article').each(function(i){ 
    $(this).attr('data-initial-index', i); 
}); 

// init isotope 
var $archive_grid = $('.archive-contents').isotope({ 
    itemSelector: 'article', 
    layoutMode: 'fitRows' 
}); 

// on arrangeComplete, find all the hidden elements and move them to the end, then re-layout isotope 
$archive_grid.on('arrangeComplete', function(){ 
    var $last = $archive_grid.find('article:visible:last'); 
    $archive_grid.find('article:not(:visible)').insertAfter($last); 
    setTimeout(function(){ 
     $archive_grid.isotope('layout'); 
    }, 500); 
}); 

var isIsotopeInit = false; 

function onHashchange() { 
    // re-sort all elements based on their original index values 
    $archive_grid.find('article').sort(function(a, b) { 
     return + $(a).attr('data-initial-index') - + $(b).attr('data-initial-index'); 
    }).appendTo($archive_grid); 

    var hashFilter = getHashFilter(), 
     isotopeFilter = hashFilter; 

    if(isotopeFilter && isotopeFilter != 'all') 
     isotopeFilter = '.wh_team_category-' + isotopeFilter; 
    else if(isotopeFilter == 'all') 
     isotopeFilter = '*'; 

    if (!hashFilter && isIsotopeInit) { 
     return; 
    } 

    isIsotopeInit = true; 
    // filter isotope 
    $archive_grid.isotope({ 
     itemSelector: 'article', 
     filter: isotopeFilter 
    }); 

    // set selected class on button 
    if (hashFilter) { 
     $archive_filters.find('.active').removeClass('active'); 
     $archive_filters.find('[data-filter="' + hashFilter + '"]').addClass('active'); 
    } 
} 

$(window).on('hashchange', onHashchange); 

// trigger event handler to init Isotope 
onHashchange(); 

Answer 1

Ich habe eine Lösung gefunden, bei der ich die versteckten Elemente vor dem Isotopenlayout (während der Filterung) verschoben habe, so dass es keine 2 Aufrufe an Layout geben muss. Kurz vor isIsotopeInit = true, fügte ich hinzu:

if(isotopeFilter != '*'){ 
    var $last = $archive_grid.find(isotopeFilter).last(), 
     $hidden = $archive_grid.find('article').not(isotopeFilter); 

    $hidden.insertAfter($last); 
} 

zog ich im Grunde den Inhalt des arrangeComplete Rückruf in denen die Filterung durchgeführt wurde, und hatte es ein wenig neu zu schreiben auf, wie die Filter-Selektoren gefiltert wurden.