多个同位素容器，Imageloaded 只加载一个

Question

我猜标题几乎解释了我的问题，我正在使用 Bootstrap 选项卡，所以我的 html 看起来像这样：

<div class="tab-content">
    <div id="tab1" class="isotopegrid tab-pane fade in">
        // Images here
    </div>
    <div id="tab2" class="isotopegrid tab-pane fade in">
        // And images here
    </div>
</div>

图像如下所示：

<div class="col-md-4 isotopegrid-item">
    <img src="#" class="img-responsive" />
</div>

这是我的 Js：

(function ($) {
    var $container = $('.isotopegrid');
    $container.each( function( i, elem ){
        var $elem = $( elem );

        $elem.imagesLoaded( function() {
            $elem.isotope({
                itemSelector : '.isotopegrid-item',
                layoutMode: 'masonry'
            });
        });
    });
})(jQuery);

但由于某种原因，它只加载 tab1 而不是 tab2，这里有人为我提供解决方案吗？哦，不加载我的意思是 tab1 上的图像已正确加载，而 tab 2 上的图像重叠

Answer 1

由于您为您的 $container 使用了一个类，而不是一个 ID，您可以这样做：

var $container = $('.isotopegrid');
    $container.imagesLoaded( function() {
        $container.isotope({
            itemSelector : '.isotopegrid-item',
            layoutMode: 'masonry'
        });
    });

如果没有真正看到问题的 jsfiddle，就不可能知道其他问题可能是问题的根源。