Chrome中的高度问题与jquery同位素在响应式布局中使用Bootstrap 3

Question

我正在使用Isotope插件来过滤我的产品列表.我也使用Bootstrap 3作为一般布局,页面应该是响应的,因此列宽是基于百分比的.我想要相同高度的缩略图和相等的宽度,一个简单的网格.首先,我尝试使用"fitRows"布局模式,但我遇到了错误的列数(在所有浏览器中),并发现Cubica在https://github.com/cubica/isotope上发布了额外的布局行为"Sloppy Masonry" -sloppy-masonry - 这有一个响应网格时修复了列宽的问题.为了解决相同的高度,我做了一个简单的JS来设置所有高度以适应最高的项目.

我的问题:在Chrome中存在缩略图高度出错,太小而内容被切断的问题.(请注意,问题是没有注意到我的resizeboxes()功能.)

(非)有趣的是它不会每次都发生.此外,当我调整Chrome窗口的大小时,布局正确...

我读到Isotope v2(现在测试版)会更好地处理响应式布局,但我无法让它更好地工作.现在我尝试了许多不同的技巧,但我无法按照自己的意愿得到它.目前的代码适用于除Chrome以外的所有主流浏览器...帮助赞赏!

这是我目前(稍微简化)的代码:

<div class="row" id="listing">
    <?php foreach ($products as $p): ?>
    <div class="col-md-3 list">
        <img src="<?=$p->image_file?>" class="img-responsive" />
        <h4><?=$p->title?></h4>
    </div>
    <?php endforeach; ?>   
 </div> 

JS功能达到相同的高度:

function resizeBoxes()
{
    var h = 0;
    $('div.view').each(function() 
    {
        var b = $(this);
        if (h < b.height()) h = b.height();
    });     
    $('div.view').height(h);
}   

和init同位素功能:

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

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

Answer 1

即使我之前读过这篇文章,也可以在这里找到答案:无法让Isotope使用Bootstrap 3 .thumbnail

问题是当没有加载图像时,由于响应图像不能设置宽度/高度值,因此同位素和我的相等高度函数都可以正确设置图像高度.所以解决方案很简单,只需将Isotope设置为init on load:

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

我添加了一个fadein以避免在加载完成之前闪烁.