[英]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' );
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.