过滤后的同位素网格布局问题

Question

我正在努力找出一个处理同位素、过滤器和网格的好解决方案。问题是每当我的元素发生过滤时，同位素就会使用剩下的东西来确定网格的布局(基于 CSS)。因此，当有不可见元素夹在可见元素之间时，设置网格样式的 ：nth-child 选择器包括那些扭曲元素实际样式的元素。以下是此问题的实际操作视频： http://3cd.co/172n1C2f2k17

例如，我有 6 个项目，如果删除项目 #2，则项目 #3 应该 #2，其余部分相应调整。我想出的唯一方法是将不可见元素物理移动到末尾，这样它们就不会影响可见元素的样式。然后，当所有内容重新排序时，我必须重置它们。

我想也许我所拥有的主要是事件问题。我能找到的唯一一个可以解决此问题的事件arrangeComplete.问题是 Isotope 此时已经确定了它的布局，但它不能解决问题，所以我需要运行$archive_grid.isotope('layout')，这将很好用，除了它发生得太快并且布局变得疯狂(见这里：http://3cd.co/023R2e0i2d3n)。所以我不得不添加一个超时来延迟事件。

这是jsfiddle：https://jsfiddle.net/cfpjf5c7/

有没有更好的方法来解决这个问题？我一直在为此苦苦挣扎，无法想出解决方案。

这是我的临时解决方案，有点工作，但不满意：

http://3cd.co/0F3h1V1x0P0P

这是此(在文档就绪事件中)的主要代码：

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

我想出了一个解决方案，我在同位素布局之前(在过滤期间)移动了隐藏元素，因此不需要对布局进行 2 次调用。就在isIsotopeInit = true之前，我补充说：

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

我基本上将arrangeComplete回调的内容移动到进行过滤的位置，并且必须根据过滤器选择器的过滤方式对其进行一些重写。