[英]Change width of items when there is less than 3 after filtering with Isotope
I have this example: http://jsfiddle.net/desandro/DJVX2/2/ that does something close to what I need. 我有一个示例: http : //jsfiddle.net/desandro/DJVX2/2/ ,它的功能接近我的需要。
I have a lot of items and I have a filter. 我有很多物品,并且有一个过滤器。 When all are shown, the items are in several columns. 当全部显示时,项目在几列中。 But when I filter some times I'll get only one or two items as a result and the client wants them to be "full width", so my items need to change width after filtering when there is less than three. 但是,当我进行某些过滤时,结果只能得到一两个项目,并且客户希望它们为“全宽”,因此,当项目少于三个时,我的项目需要在过滤后更改宽度。
This is what I have so far: 这是我到目前为止的内容:
$(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' );
}
}
);
});
It does work fine on my project if I click manually on both items using the script from the fiddle, but if I try to implement it inside the layoutComplete event they will resize but they won't position properly, even when the $container.isotope( 'layout' );
如果我使用小提琴中的脚本手动单击两个项目,则它在我的项目上确实可以正常工作,但是,如果我尝试在layoutComplete事件中实现它,它们将调整大小,但即使$container.isotope( 'layout' );
也不能正确放置$container.isotope( 'layout' );
line is there. 线在那里。
Of course, when I click the filters I need the items to go back to their previous size but since I'm having trouble with the first part of the problem, let's find out that beforehand. 当然,当我单击过滤器时,我需要将项目恢复为之前的大小,但是由于我在问题的第一部分上遇到了麻烦,因此请事先进行查找。
Here is a fiddle with my issue: http://jsfiddle.net/DJVX2/1305/ 这是我的问题的小提琴: http : //jsfiddle.net/DJVX2/1305/
You are actually toggling two times your big
class in your click
event. 你实际上切换两次的big
班级在您的click
事件。 Remove one : 删除一个:
$('.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' );
});
Then, I don't think you really need your layoutComplete
event. 然后,我认为您确实不需要您的layoutComplete
事件。 You can just put the code when you are filtering something : 您可以在过滤内容时放入代码:
$('#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.