Question

我需要帮助：我使用带有无限滚动的同位素来显示画廊的缩略图。当所有项目都显示时（无同位素过滤器），一切正常。通过利弊，当一个人使用同位素过滤器（也就是说在我的页面的开头）时，观看缩略图的动画会运行所有新元素，甚至那些应该被过滤的元素！

简而言之：我们看到每个新项目加载的动画位，它会扩展然后缩小，变得不透明和隐藏，创造闪光...... 如何从每个应该过滤的新元素的开头禁用和隐藏动画？

感谢您的帮助！（对不起我的英文）

＆＃13;

/*Masonry*/
var $containermasonry = $('.masonry');
 
$containermasonry.imagesLoaded( function() {
  	$containermasonry.masonry({
	   	      itemSelector: '.item', 	 	
			  });
			  
	$containermasonry.isotope({
			  transitionDuration: '0.8s',
			  animationEngine: 'best-available',
			  itemSelector : '.item',
			  layoutMode : 'masonry',
			  filter : '.new',
			  
				  getSortData: {
					date: '[data-date]',
					categories:'[data-categ]',
				  } 		  
			});
});


/*infinitescroll*/
 $containermasonry.infinitescroll({
      navSelector  : '#page-nav',
      nextSelector : '#page-nav a',
	  itemSelector : '.item',

		  loading: {
			  finishedMsg: '',
			  img: '_include/img/supersized/progress.gif'
		  }
      },

	       function( newElements ) {
        var $newElems = $( newElements ).css({'display': 'none', 'visibility': 'hide', opacity: 0});
		
        	$newElems.imagesLoaded(function(){
				/*$newElems.animate({ opacity: 1 });*/	
				$containermasonry.infinitescroll('retrieve');								
				$containermasonry.masonry( 'appended', $newElems, true );
				$containermasonry.isotope( 'appended', $newElems, true );
       		});
      }	  
    );



			
		// filter items
		var $optionSets = $('#options .option-set'),
			$optionLinks = $optionSets.find('a');
	
		  $optionLinks.click(function(){
			var $this = $(this);
			if ( $this.hasClass('selected') ) {
			  return false;
			}
			var $optionSet = $this.parents('.option-set');
			$optionSet.find('.selected').removeClass('selected');
			$this.addClass('selected');
	  
			var filterValue = $(this).attr('data-option-value');
			$containermasonry.isotope({ filter: filterValue });											
			});

＆＃13;

Answer 1

没有jsfiddle或链接很难回答。最大的问题是你正在使用同时调用masonry.js和isotope.js！它们是两个独立的插件，不能一起使用。同位素有一个砌体布局，这是你的困惑所在，它不是用masonry.js调用的。选择其中一个。此外，如果您使用同位素v2，animationEngine已从该版本中删除。以下是同位素使用时应使用的代码：

var $containermasonry = $('.masonry');

$containermasonry.imagesLoaded( function() {

 $containermasonry.isotope({
          transitionDuration: '0.8s',
          itemSelector : '.item',
          layoutMode : 'masonry',
          filter : '.new',

              getSortData: {
                date: '[data-date]',
                categories:'[data-categ]',
              }           
        });
 });


 //infinitescroll
 $containermasonry.infinitescroll({
  navSelector  : '#page-nav',
  nextSelector : '#page-nav a',
  itemSelector : '.item',

      loading: {
          finishedMsg: '',
          img: '_include/img/supersized/progress.gif'
      }
  },

       function( newElements ) {
    var $newElems = $( newElements ).css({'display': 'none', 'visibility': 'hide', opacity: 0});

        $newElems.imagesLoaded(function(){
            //$newElems.animate({ opacity: 1 });    
            $containermasonry.infinitescroll('retrieve');                               
            $containermasonry.isotope( 'appended', $newElems, true );
        });
  }   
 );




    // filter items
    var $optionSets = $('#options .option-set'),
        $optionLinks = $optionSets.find('a');

      $optionLinks.click(function(){
        var $this = $(this);
        if ( $this.hasClass('selected') ) {
          return false;
        }
        var $optionSet = $this.parents('.option-set');
        $optionSet.find('.selected').removeClass('selected');
        $this.addClass('selected');

        var filterValue = $(this).attr('data-option-value');
        $containermasonry.isotope({ filter: filterValue });                                         
        });

无限卷轴+同位素

1 个答案: