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') 可能会首先执行导致错误。