jQuery同位素佈局

Question

我在轉換我的同位素1.5腳本以使用同位素2.2時遇到了麻煩。這裏的老：

var $container = jQuery('.portfolio-grid'), 
    $gridImages = jQuery('.portfolio-grid img'); 
    $container.imagesLoaded(function() { 
     $container.isotope({ 
      layoutMode: 'masonry', 
      animationEngine: 'best-available', 
      resizable: false, 
      transformsEnabled: true, 
      animationEngine: 'best-available', 
      itemSelector: 'li.portfolio-item', 
      onLayout: function() { jQuery(window).trigger("scroll"); } 
     }); 
      $gridImages.load(function() { 
      $container.isotope('reLayout'); 
     }); 
    }); 

    jQuery(window).bind('resize load', function(){ $container.isotope('reLayout'); }); 

    $gridImages.lazyload({failure_limit: Math.max($gridImages.length - 1, 0)}); 

它工作得很好，這裏的新

var $container = jQuery('.portfolio-grid'); 
    var $gridImages = jQuery('.portfolio-grid img'); 
    $container.imagesLoaded(function() { 
     $container.isotope({ 
      itemSelector: '.portfolio-item',    
      layoutMode: 'masonry', 
      resizable: false 
     }); 
     $container.isotope('on', 'layoutComplete', function() { jQuery(window).trigger("scroll"); }); 
     $gridImages.load(function() { $container.isotope('layout'); });       
    });  
    jQuery(window).bind('resize load', function(){ $container.isotope('layout'); }); 
    $gridImages.lazyload({failure_limit: Math.max($gridImages.length - 1, 0)}); 

，但我遇到奇怪的行爲，就像在網格佈局（只有在一些非常具體的瀏覽器的寬度）孔，有時，控制檯錯誤「無法在初始化之前調用同位素方法;嘗試調用'佈局'」（但只有有時以及當我刷新頁面，而不是硬重載時）。

我錯過了什麼？

http://dev.jumpcutcreative.com/

Answer 1

要補洞你可能想嘗試同位素的packery layout。

layoutMode: 'packery' 

就你提到的控制檯錯誤而言，即使刷新了幾十次，我也無法複製它。也許發生這種情況的原因是，在觸發$container.imagesLoaded之前，它有時會在頁面加載中運行function(){ $container.isotope('layout');。我會假設圖像是頁面上最後加載的東西，所以jQuery(window).bind('resize load')和$container.imagesLoaded會同時觸發，有時可能會首先執行jQuery(window).bind('resize load')導致錯誤。