Question

我使用Isotope插件过滤我的商品详情。我也使用Bootstrap 3作为一般布局，页面应该是响应的，因此列宽是基于百分比的。我想要相同高度的缩略图和相等的宽度，一个简单的网格。首先，我尝试了＃34; fitRows＆＃34;布局模式，但我有一个问题，错误的列数显示（在所有浏览器中），并发现额外的布局行为＆＃34; Sloppy Masonry＆＃34;由Cubica发布在https://github.com/cubica/isotope-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

即使我之前看过这篇文章，也可以在这里找到答案：Can't get Isotope working with Bootstrap 3 .thumbnail

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

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

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

Answer 2

imagesLoaded插件应该完全有效（即使它已从Isotope v2中删除），我个人已经解决了这个问题：

var myGrid = $('.grid');

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

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

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

2 个答案: