用同位素过滤后少于3个时更改项目的宽度

Question

我有一个示例： http : //jsfiddle.net/desandro/DJVX2/2/ ，它的功能接近我的需要。

我有很多物品，并且有一个过滤器。 当全部显示时，项目在几列中。 但是，当我进行某些过滤时，结果只能得到一两个项目，并且客户希望它们为“全宽”，因此，当项目少于三个时，我的项目需要在过滤后更改宽度。

这是我到目前为止的内容：

$(function(){
  var $container = $('#container');

  $container.isotope({
    itemSelector: '.item',
    masonry: {
      columnWidth: 60
    }
  })

$container.isotope( 'once', 'layoutComplete',
        function( isoInstance, laidOutItems ) {
            if(laidOutItems.length<=2){

                $( ".item:not([style$='display: none;'])" ).each(function( index ) {
                    var $this = $(this);

                    if(!$this.hasClass('big')){
                        tileStyle = { width: 1048, height: 290};
                        $this.toggleClass('big');

                        $this.find('.item-content').stop().animate( tileStyle );
                    }
                    $(this).trigger('click');
                });
                $container.isotope( 'layout' );
            }
        }
    );
});

如果我使用小提琴中的脚本手动单击两个项目，则它在我的项目上确实可以正常工作，但是，如果我尝试在layoutComplete事件中实现它，它们将调整大小，但即使$container.isotope( 'layout' );也不能正确放置$container.isotope( 'layout' ); 线在那里。

当然，当我单击过滤器时，我需要将项目恢复为之前的大小，但是由于我在问题的第一部分上遇到了麻烦，因此请事先进行查找。

这是我的问题的小提琴： http : //jsfiddle.net/DJVX2/1305/

Answer 1

你实际上切换两次的big班级在您的click事件。 删除一个：

$('.item').click(function(){
    var $this = $(this),
        tileStyle = $this.hasClass('big') ? { width: 50, height: 50} : { width: 170, height: 110};
    //$this.toggleClass('big');

    $this.find('.item-content').stop().animate( tileStyle );

    $this.toggleClass('big');

    $this.find('.zoom').stop().animate( tileStyle );

    $container.isotope( 'layout' );

});

然后，我认为您确实不需要您的layoutComplete事件。 您可以在过滤内容时放入代码：

$('#filters').on( 'click', 'button', function() {
    var filterValue = $(this).attr('data-filter');
    // use filterFn if matches value
    filterValue = filterFns[ filterValue ] || filterValue;
    $container.isotope({ filter: filterValue });

    // Make all items small
    $('.item').removeClass('big');
    $('.item .item-content').stop().animate({ width: 50, height: 50});

    // If filtered items are less than 3, make them wide
    if ($(filterValue).length <= 2) {
        $( ".item:not([style$='display: none;'])" ).each(function( index ) {
            $(this).trigger('click');
        });
    }

    $container.isotope( 'layout' );
});

JsFiddle演示