無限滾動+同位素

Question

我需要幫助：我使用帶有無限滾動的同位素來顯示畫廊的縮略圖。所有項目都顯示時，一切正常（不含同位素過濾器）。通過利弊，當人們使用同位素過濾器（也就是說在我的頁面打開時），查看縮略圖的動畫會運行所有新元素，即使是那些應該被過濾的元素！

簡而言之：我們看到每個新項目的動畫位加載後，它會展開然後縮小，變得不透明並隱藏，創建閃爍...... 如何從開始時禁用和隱藏動畫，每個新元素應該是過濾？

感謝您的幫助！ （對不起，我的英語）

/*Masonry*/ 
 
var $containermasonry = $('.masonry'); 
 
    
 
$containermasonry.imagesLoaded(function() { 
 
    \t $containermasonry.masonry({ 
 
\t  \t  itemSelector: '.item', \t \t 
 
\t \t \t }); 
 
\t \t \t 
 
\t $containermasonry.isotope({ 
 
\t \t \t transitionDuration: '0.8s', 
 
\t \t \t animationEngine: 'best-available', 
 
\t \t \t itemSelector : '.item', 
 
\t \t \t layoutMode : 'masonry', 
 
\t \t \t filter : '.new', 
 
\t \t \t 
 
\t \t \t \t getSortData: { 
 
\t \t \t \t \t date: '[data-date]', 
 
\t \t \t \t \t categories:'[data-categ]', 
 
\t \t \t \t } \t \t 
 
\t \t \t }); 
 
}); 
 

 

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

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

 
\t  function(newElements) { 
 
     var $newElems = $(newElements).css({'display': 'none', 'visibility': 'hide', opacity: 0}); 
 
\t \t 
 
     \t $newElems.imagesLoaded(function(){ 
 
\t \t \t \t /*$newElems.animate({ opacity: 1 });*/ \t 
 
\t \t \t \t $containermasonry.infinitescroll('retrieve'); \t \t \t \t \t \t \t \t 
 
\t \t \t \t $containermasonry.masonry('appended', $newElems, true); 
 
\t \t \t \t $containermasonry.isotope('appended', $newElems, true); 
 
     \t \t }); 
 
     } \t 
 
    ); 
 

 

 

 
\t \t \t 
 
\t \t // filter items 
 
\t \t var $optionSets = $('#options .option-set'), 
 
\t \t \t $optionLinks = $optionSets.find('a'); 
 
\t 
 
\t \t $optionLinks.click(function(){ 
 
\t \t \t var $this = $(this); 
 
\t \t \t if ($this.hasClass('selected')) { 
 
\t \t \t return false; 
 
\t \t \t } 
 
\t \t \t var $optionSet = $this.parents('.option-set'); 
 
\t \t \t $optionSet.find('.selected').removeClass('selected'); 
 
\t \t \t $this.addClass('selected'); 
 
\t 
 
\t \t \t var filterValue = $(this).attr('data-option-value'); 
 
\t \t \t $containermasonry.isotope({ filter: filterValue }); \t \t \t \t \t \t \t \t \t \t \t 
 
\t \t \t });

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 });           
     });