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

Question

我正在使用同位素插件来过滤我的产品列表。我还使用 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);
}   

以及初始化同位素函数:

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

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

Answer 1

尽管我之前读过这篇文章，但可以在这里找到答案:Can't get Isotope working with Bootstrap 3 .thumbnail

问题是，当未加载图像时，并且由于响应图像无法设置宽度/高度值，因此同位素或我的等高函数都可以正确设置图像高度。所以解决方案很简单，只需将 Isotope 设置为加载时 init 即可:

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

我添加了淡入淡出以避免加载完成之前闪烁。