當組合過濾器不返回結果並且應用了另一組正確的過濾器時，jQuery Isotope插件會中斷布局

Question

同位素處理WordPress帖子的過濾和布局。 直到沒有結果所使用的過濾器，並運用正確的一組后正確的過濾器發現系統工作正常。

所以問題是：

1. 只要找到結果（使用過濾器），插件就可以正常工作。
2. 如果找不到任何結果，然后我又應用了另一組正確的過濾器，則布局將中斷。

我認為同位素失去了寬度和/或高度之類的感覺。

過濾器不返回結果：

過濾器再次返回結果：

Javascript：

jQuery(window).load(function(){

var $container = jQuery('#talot'),
    filters = {};

    $container.isotope({
        itemSelector : '.talo-item',
        animationOptions: {
            duration: 750,
            easing: 'linear',
            queue: false
        }
    });

$container.isotope('reLayout');

// filter buttons
jQuery('.filter a').click(function(){
    var $this = jQuery(this);
    // don't proceed if already selected
    if ( $this.hasClass('selected') ) {
        return;
    }

    var $optionSet = $this.parents('.option-set');
    // change selected class
    $optionSet.find('.selected').removeClass('selected');
    $this.addClass('selected');

    // store filter value in object
    var group = $optionSet.attr('data-filter-group');
    filters[ group ] = $this.attr('data-filter-value');
    // convert object into array
    var isoFilters = [];
    for ( var prop in filters ) {
    isoFilters.push( filters[ prop ] )
    }
    var selector = isoFilters.join('');
    console.log(selector);
    $container.isotope({ filter: selector });

return false;
});

});

我為選擇器添加了console.log進行調試，並以此方式發現了問題。 任何幫助是極大的贊賞！

如果您需要更多信息，請詢問，我將提供所需的一切。 預先感謝您的代碼向導！

Answer 1

我發現自己的一個（至少是部分）解決方案是為item類設置min-height CSS屬性。 我認為這是一個骯臟的解決方案，因此，如果有人可以提出“真正的解決方案”，請:)

Answer 2

這是因為插件開始工作，直到所有圖像加載完畢。 要解決此問題，可以使用同位素中包含的imagesLoaded。 使用此插件非常容易-您可以在此處看到用法示例。