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

我使用Isotope插件来过滤我的产品列表。我也使用Bootstrap 3作为总体布局，页面应该是响应式的，所以列宽是基于百分比的。我想要等高的缩略图图像和相等的宽度，一个简单的网格。首先，我尝试了“fitRows”布局模式，但是我遇到了错误的列数显示问题（在所有浏览器中），并发现Cubica在https://github.com/cubica/isotope-sloppy-masonry发布的额外布局行为“Sloppy Masonry” - 这样可以解决列宽问题一个响应式网格。为了解决相同的高度，我做了一个简单的JS来设置所有高度以适应最高的项目。Chrome中的高度问题与jQuery的同位素响应布局与Bootstrap 3

我的问题：在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(); 
});

来源

2014-01-16 jtheman

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

问题是未加载的图像时，由于响应图像不能具有宽度/高度值来设定，无论是同位素也不我的高度相等函数可以正确设定图像高度。因此，解决方案很简单，只设置同位素在负载上init来：

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

我加了淡入，以避免闪烁载荷已经完成了。

来源

2014-01-16 21:46:59 jtheman

的imagesLoaded插件应该完全正常工作（即使它已经从同位素V2删除），我个人已经解决了这样的：

var myGrid = $('.grid'); 

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

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

来源

2014-10-28 23:52:37 silk

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

回答

相关问题