不能让Isotope使用Bootstrap 3 .thumbnail

Question

根据几个SO成员的建议,我决定尝试在网页上使用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-->

这是Isotope脚本:

$('.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({...});
});