当组合过滤器未返回任何结果并应用另一组正确的过滤器时，jQuery Isotope插件会中断布局

Question

Isotope处理WordPress帖子的过滤和布局。系统正常工作，直到找不到使用过滤器的结果，并在之后立即应用正确的过滤器。

所以问题是：

1. 只要找到结果（使用过滤器），该插件就可以正常运行。
2. 如果未找到任何结果，并且我在此之后立即应用另一组正确的过滤器，则布局会中断。

我认为Isotope会失去宽度和/或高度的感觉。

过滤器未返回任何结果：



过滤器再次返回结果：



使用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-property。我认为这是一个有点肮脏的解决方案，所以如果有人能想出一个“真正的”感觉自由：）