Question

我正在努力寻找一个处理Isotope，过滤器和网格的好解决方案。问题是每当我的元素发生过滤时，同位素使用剩下的东西来确定网格的布局（基于CSS）。因此，当在可见元素之间存在不可见元素时，：对网格进行样式化的第n个子选择器包括那些会扭曲元素的实际样式的选择器。以下是有关此问题的视频：http://3cd.co/172n1C2f2k17

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

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

这里是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

我找到了一个解决方案，我在Isotope Layout之前移动隐藏元素（在过滤期间），因此不需要2次调用Layout。就在isIsotopeInit = true之前，我补充道：

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

    $hidden.insertAfter( $last );
}

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

过滤

1 个答案: