不能让Isotope使用Bootstrap 3 .thumbnail

Question

遵循几个S.O.的建议。成员，我决定尝试在网页上使用Jquery Isotope。我也在使用Bootstrap 3，并且无法获得缩略图库（具有不同大小的横向/纵向方向图像）看起来不错。

我正在使用Bootstrap 3 .thumbnail类调整图像大小以适应响应列。一切都很好，直到我将Isotope应用于这些缩略图div。我真的不知道发生了什么事，但是我花了好几天时间来讨论一切（不要笑）而且无法弄明白，我正在失去理智等等。我希望这是非常简单的事情。我很遗憾，因为我在bootply.com上看到了似乎有效的例子（不知道我是否在Bootstrap 3中看过任何一个。）

这就是发生的事情：

以下是我一直在测试的页面的链接：http://www.chrissvensson.info/projects/025

这是我正在使用的代码的主要部分。

<div class="container iso">
<div class="row">
  <div class="item col-xs-12 col-sm-4 col-md-3">
    <a class="thumbnail fancybox" href="<?php echo dirname($image->url()); ?>/detail/<?php echo $image->name() ?>-detail.jpg" rel="group"><img src="<?php echo $image->url() ?>" width="<?php echo $image->width(); ?>" height="<?php echo $image->height(); ?>"></a>
</div><!--thumbnail div-->
    <?php endforeach ?>
<?php endif ?>
</div><!--row-->

这是同位素脚本：

$('.iso').isotope({
// options
itemSelector: '.item',
layoutMode: 'masonry'
});

我一直在测试这个jsfiddle中的东西：http://jsfiddle.net/52VtD/345/

这与Bootstrap 3 css相关联，并且我的定制CSS也在那里。出于某种原因，它似乎在小提琴中工作正常（除了它正在削减底部图像的事实），但它在我的网站上看起来完全不同。正如您将看到的，它就像它不计算div的垂直高度，只是裁剪它们并将它们堆叠在一起。

还有几点：

• 我很确定它与Bootstrap 3的.thumbnail类有关。当我从链接中删除该类时，事情似乎工作正常（除了图像不会扩展到我想要的列）
• 这是一个疯狂的部分：有几次我点击了另一个标签，或者在访问另一个窗口后返回我的网站并且一切都在工作。我发誓我亲眼目睹了这一点，但我可能会产生幻觉。不确定这是否意味着它的工作非常，非常，非常缓慢或某些东西，但是？

如果您能提供任何建议，我将非常非常感激！非常感谢你。

Answer 1

您需要添加imagesLoaded事件侦听器。

$('.container').imagesLoaded(function(){
    $('.container').isotope({...});
});

Answer 2

注意：
1.你应该在windwo load事件中调用iso-top函数（它会等待资源加载）你也可以在页脚中调用函数。

2.确认css加载后的函数调用。

$(window).load(function(){
     $('.iso').isotope({
     // options
     itemSelector: '.item',
     layoutMode: 'masonry'
    });
   });

Answer 3

imagesLoaded插件应该完全有效（即使它已从Isotope v2中删除），我个人已经解决了这个问题：

var myGrid = $('.grid');

myGrid.imagesLoaded(function(){
    myGrid.isotope();
});

但是我也很喜欢这个插件在内部如何解决这个问题：http://goo.gl/sQ6yXj它正在使用Isotope v2这是非常棒的