带有jquery同位素的Chrome在具有Bootstrap 3的响应布局中的高度问题

我正在使用同位素插件来过滤我的产品列表。我还使用bootstrap3进行总体布局，页面应该是响应性的，因此列宽是基于百分比的。我想要等高的缩略图和等宽的简单网格。首先，我尝试使用“fitRows”布局模式，但我遇到了显示错误列数的问题（在所有浏览器中），并发现Cubica在发布的额外布局行为“Sloppy Mashine”-这修复了具有响应网格时列宽的问题。为了解决等高问题，我做了一个简单的JS来设置所有高度以适应最高的项目

我的问题：在Chrome中，存在缩略图高度错误、太小和内容被截断的问题。（请注意，问题在于我的

resizebox（）函数未归档。）

（不）有趣的是，它不是每次都发生。另外，当我调整Chrome窗口的大小时，布局会正确

我读到同位素v2（现在是beta版）可以更好地处理响应性布局，但我无法让它更好地工作。现在我已经尝试了很多不同的技巧，但我不能得到我想要的。目前的代码在除Chrome以外的所有主要浏览器中都可以使用。。。谢谢你的帮助

以下是我当前的（稍微简化的）代码：

尽管我以前读过这篇文章，但答案可以在这里找到：

问题是，当图像未加载时，由于响应图像不能设置宽度/高度值，同位素或我的等高函数都可以正确设置图像高度。所以解决方案很简单，只需在加载时将同位素设置为init：

$(window).load(function() {
    resizeBoxes();
    initIsotope();
    $('#listing').animate({opacity: 1.0}, 200);
});

我添加了一个fadein，以避免在加载完成之前闪烁。
imagesLoaded插件应该完全可以工作（即使它已从同位素v2中删除），我个人已经这样解决了它：

var myGrid = $('.grid');

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

但我也很喜欢这个插件如何在内部解决这个问题：它使用的同位素v2非常棒

var $container = $('#listing');
function initIsotope()
{
     $container.isotope({
          layoutMode: 'sloppyMasonry',
     });
}

$(window).resize(function() {
    resizeBoxes();  
    initIsotope();
});
$(document).ready(function() {
    resizeBoxes();
    initIsotope();
});

$(window).load(function() {
    resizeBoxes();
    initIsotope();
    $('#listing').animate({opacity: 1.0}, 200);
});

var myGrid = $('.grid');

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