twitter-bootstrap 使用 Bootstrap 3 在响应式布局中使用 jquery Isotope 在 Chrome 中的高度问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21170236/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Height issue in Chrome with jquery Isotope in responsive layout with Bootstrap 3
提问by jtheman
I'm using the Isotope plugin to filter my product listing. I also use Bootstrap 3 for the general layout, the page should be responsive so the column widths are percentage-based. I want equal height thumbnail images and equal width, a simple grid. First I tried with "fitRows" layout mode but I had a problem with wrong numbers of columns showing (in all browsers) and found the extra layout behaviour "Sloppy Masonry" posted by Cubica at https://github.com/cubica/isotope-sloppy-masonry- this fixed the problem with column widths when having a responsive grid. To solve equal heights I did a simple JS to set all heights to adapt to the highest item.
我正在使用 Isotope 插件来过滤我的产品列表。我还使用 Bootstrap 3 进行总体布局，页面应该是响应式的，因此列宽是基于百分比的。我想要等高的缩略图图像和等宽的简单网格。首先，我尝试使用“fitRows”布局模式，但我遇到了显示列数错误（在所有浏览器中）的问题，并发现了 Cubica 在https://github.com/cubica/isotope 上发布的额外布局行为“Sloppy Masonry” -sloppy-masonry- 这解决了具有响应式网格时列宽的问题。为了解决相等的高度，我做了一个简单的 JS 来设置所有高度以适应最高的项目。
My problem: In Chrome there is a problem that the thumbnail height gets wrong, much too small and contents gets cut off.(note that the issue is there unregarded of my resizeboxes()function.)
我的问题：在 Chrome 中存在缩略图高度错误、太小且内容被截断的问题。（请注意，问题出在我的resizeboxes()职能之外。）
The (un)funny thing is it doesn't happen every time. Also when I resize the Chrome window, the layout gets right...
（不）有趣的是它不会每次都发生。此外，当我调整 Chrome 窗口的大小时，布局变得正确......
I read that Isotope v2 (now beta) would handle responsive layouts better but I couldn't make it work better. Now I have tried many different tricks but I can't get it as I want. The current code works in all major browsers except Chrome... Help appreciated!
我读到 Isotope v2（现在是测试版）可以更好地处理响应式布局，但我无法让它更好地工作。现在我尝试了许多不同的技巧，但我无法如我所愿。当前代码适用于除 Chrome 之外的所有主要浏览器......感谢帮助！
Here is my current (slightly simplified) code:
这是我当前的（稍微简化的）代码：
<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 to make equal heights:
JS函数使等高：
function resizeBoxes()
{
var h = 0;
$('div.view').each(function()
{
var b = $(this);
if (h < b.height()) h = b.height();
});
$('div.view').height(h);
}
And init isotope function:
和 init 同位素函数：
var $container = $('#listing');
function initIsotope()
{
$container.isotope({
layoutMode: 'sloppyMasonry',
});
}
$(window).resize(function() {
resizeBoxes();
initIsotope();
});
$(document).ready(function() {
resizeBoxes();
initIsotope();
});
回答by jtheman
Even though I read this post before, the answer could be found here: Can't get Isotope working with Bootstrap 3 .thumbnail
即使我之前读过这篇文章，也可以在这里找到答案：Can't get Isotope working with Bootstrap 3 .thumbnail
Problem was that when images is not loaded, and since responsive images can't have width/height values set, either Isotope nor my equal height function could correctly set the image height. So solution was simple, just setting Isotope to init on load instead:
问题是当图像未加载时，并且由于响应式图像无法设置宽度/高度值，因此同位素和我的等高函数都可以正确设置图像高度。所以解决方案很简单，只需在加载时将 Isotope 设置为 init 即可：
$(window).load(function() {
resizeBoxes();
initIsotope();
$('#listing').animate({opacity: 1.0}, 200);
});
I added a fadein to avoid flickering before load had finished.
我添加了一个淡入淡出以避免在加载完成之前闪烁。
回答by silk
the imagesLoaded plugin should totally work (even though it has been removed from Isotope v2), I personally have solved it like this:
imagesLoaded 插件应该完全可以工作（即使它已从 Isotope v2 中删除），我个人已经这样解决了：
var myGrid = $('.grid');
myGrid.imagesLoaded(function(){
myGrid.isotope();
});
But I also loved how this plugin solved the issue internally: http://goo.gl/sQ6yXjand it is using Isotope v2 which is very awesome
但我也很喜欢这个插件如何在内部解决这个问题：http: //goo.gl/sQ6yXj并且它使用的是非常棒的 Isotope v2
