无法让 Isotope 与 Bootstrap 3 一起使用 .thumbnail答案

【问题标题】：Can't get Isotope working with Bootstrap 3 .thumbnail无法让 Isotope 与 Bootstrap 3 一起使用 .thumbnail
【发布时间】：2014-10-29 07:51:41
【问题描述】：

听从几位 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 类中的某些内容有关。当我从链接中删除该类时，一切似乎都正常（除了图像没有缩放到我想要的列）
这是疯狂的部分：有几次我点击了另一个选项卡，或者在访问了另一个窗口后回到了我的网站，一切似乎都在工作。我发誓我亲眼目睹了这一切，但我可能产生了幻觉。不过，不确定这是否意味着它的工作非常、非常、非常缓慢？

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

【问题讨论】：

可能是因为调用isotope() 时没有加载图像，因此引擎不知道每个项目允许多少高度。尝试在页面加载完成后调用它，或者将width 和height 属性放在图像标签中。
虽然，现在我看到你确实有宽度/高度属性。你确定这些输出正确吗？
感谢您的评论，@ahren。我很确定宽度/高度属性输出正确，但话又说回来，我认为 Bootstrap 的 .thumbnail 类会调整它们的大小以适应列。不确定这是否会影响同位素。
@ahren 我在最后有同位素代码，就在

标签： jquery css twitter-bootstrap jquery-isotope

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

注意：
1.windwo加载事件中调用iso-top函数（等待资源加载），也可以在footer调用函数。

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

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

【讨论】：

【解决方案3】：

imagesLoaded 插件应该完全可以工作（即使它已从 Isotope v2 中删除），我个人已经这样解决了：

var myGrid = $('.grid');

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

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

【讨论】：