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

我很努力地找出处理同位素，过滤器和网格的好方法。问题是无论何时在我的元素上进行过滤，同位素使用剩下的来确定网格布局（基于CSS）。因此，当可见元素之间存在不可见元素时，样式化网格的第n个子选择器会包含那些偏斜元素实际样式的元素。下面是这个问题的视频：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();

来源

2017-06-22 solepixel

你可以在CodePen中重新创建问题，所以我们可以尝试一些？ –

链接或jsfiddle/codepen是必要的，视频是不够的。 – Macsupport

试试这个：https：//jsfiddle.net/cfpjf5c7/ – solepixel

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

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

    $hidden.insertAfter($last); 
}

我基本上移动arrangeComplete回调到过滤，正在采取其中的内容，有基于过滤器选择是如何被过滤改写了一点。

来源

2017-06-26 14:02:43 solepixel

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

回答

相关问题