過濾器後的同位素網格佈局問題

我很努力地找出處理同位素，過濾器和網格的好方法。問題是無論何時在我的元素上進行過濾，同位素使用剩下的來確定網格佈局（基於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

過濾器後的同位素網格佈局問題

回答

相關問題