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

Question

我正在努力寻找处理同位素、过滤器和网格的良好解决方案。问题是每当对我的元素进行过滤时，同位素都会使用剩余的内容来确定网格的布局（基于 CSS）。因此，当可见元素之间夹杂着不可见元素时，设置网格样式的 :nth-child 选择器包括那些元素，这会扭曲元素的实际样式。下面是这个问题的视频：http://3cd.co/172n1C2f2k17

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

我想也许我遇到的主要是事件问题。我能找到的唯一解决此问题的事件 arrangeComplete。问题是同位素此时已经确定了它的布局并且它没有解决问题，所以我需要运行 $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

我想出了一个解决方案，我在同位素布局之前（在过滤期间）移动了隐藏的元素，因此不需要两次调用布局。就在 isIsotopeInit = true 之前，我添加了：

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

    $hidden.insertAfter( $last );
}

我基本上将 arrangeComplete 回调的内容移到了进行过滤的地方，并且不得不根据过滤器选择器的过滤方式稍微重写它。

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

Isotope Grid Layout Issues After Filter

jquery

jquery-isotope

masonry