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事件中实现它们，它们将调整大小但它们将无法正确定位，即使{ {1}}就行了。

当然，当我点击过滤器时，我需要将这些项目恢复到以前的尺寸，但由于我遇到了问题的第一部分问题，所以我们事先要找出它。

以下是我的问题：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 demo

使用Isotope过滤后，如果小于3，则更改项目的宽度

1 个答案: