javascript - 用同位素过滤后小于 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' );
            }
        }
    );
});

如果我使用 fiddle 中的脚本手动单击这两个元素，它在我的元素上工作正常，但如果我尝试在 layoutComplete 事件中实现它，它们将调整大小但不会正确定位，即使 $container.isotope( 'layout' ); 线就在那里。

当然，当我点击过滤器时，我需要将元素恢复到原来的大小，但由于我在解决问题的第一部分时遇到了麻烦，所以让我们事先查明。

这是我的问题的 fiddle :http://jsfiddle.net/DJVX2/1305/

Answer 1

实际上，您在 click 事件中切换了两次 big 类。删除一个:

$('.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 demo