jQuery同位素布局

Question

我在用同位素2.2转换我的同位素1.5脚本时遇到了困难。这是旧的：

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

为了填补空洞，你可能想试试同位素的包装布局。

layoutMode: 'packery'

就您提到的控制台错误而言，即使刷新了几十次，我也无法复制它。可能发生这种情况是因为有时在触发function(){ $container.isotope('layout');之前在页面加载上运行$container.imagesLoaded。我假设图像是页面上最后加载的东西，因此jQuery(window).bind('resize load')和$container.imagesLoaded将同时触发，有时jQuery(window).bind('resize load')会首先执行，从而导致错误。