簡體   English   中英

用同位素過濾后少於3個時更改項目的寬度

[英]Change width of items when there is less than 3 after filtering with Isotope

我有一個示例: 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/

你實際上切換兩次的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演示

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM