0

Isotope 处理 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 以进行调试，并以这种方式发现了问题。任何帮助是极大的赞赏！

如果您需要更多信息，请询问，我会提供所需的一切。提前感谢您的代码向导！

4

2 回答 2

0

我发现自己的一个（至少部分）解决方案是为项目类设置 min-height CSS-property。我认为这是一个有点肮脏的解决方案，所以如果有人能想出一个“真正的”，请随意:)

于 2013-07-12T16:26:06.620 回答
0

发生这种情况是因为插件开始工作，直到加载所有图像。为了解决这个问题，您可以使用包含在 isotope 中的 imagesLoaded。使用这个插件非常容易——您可以在此处查看使用示例。

于 2013-09-06T06:44:36.587 回答