Question

我见过很多关于这方面的问题而且没有答案（至少没有一个能帮助我）。

我的设置非常简单 - 一个带有图像的流体容器（没有固定宽度）。

我在CSS中设置了每个div项目为25％并且我已在其中设置图像以填充div。

我已将同位素设置为仅在imagesLoaded之后运行。

问题是在初始加载时，元素定位不正确。它们之间有一些填充物，甚至可以从容器中取出。只有当我调整窗口大小时，它们才能正确定位，即使我将窗口恢复到全屏状态。

你知道为什么会这样吗？

这是我的代码：

HTML：

<div id="main">
   <div class="item"><img src="http://lorempixel.com/300/200/"></div>
   <div class="item"><img src="http://lorempixel.com/440/300/"></div>
   <div class="item"><img src="http://lorempixel.com/450/560/"></div>
   <div class="item"><img src="http://lorempixel.com/410/270/"></div>
   <div class="item"><img src="http://lorempixel.com/440/230/"></div>
   <div class="item"><img src="http://lorempixel.com/470/460/"></div>
   <div class="item"><img src="http://lorempixel.com/400/200/"></div>
   <div class="item"><img src="http://lorempixel.com/430/780/"></div>
   <div class="item"><img src="http://lorempixel.com/400/520/"></div>
   <div class="item"><img src="http://lorempixel.com/420/120/"></div>
   <div class="item"><img src="http://lorempixel.com/500/260/"></div>
   <div class="item"><img src="http://lorempixel.com/200/200/"></div>
   <div class="item"><img src="http://lorempixel.com/100/200/"></div>
   <div class="item"><img src="http://lorempixel.com/400/200/"></div>
   <div class="item"><img src="http://lorempixel.com/890/200/"></div>
   <div class="item"><img src="http://lorempixel.com/400/200/"></div>
   <div class="item"><img src="http://lorempixel.com/400/200/"></div>
</div>

CSS：

#main{margin-right:250px;}
#main .item { width: 25%;}
#main .item img { width:100%;height:100%;}

JS：

var $container = $("#main");
$container.imagesLoaded(function () {
    $container.isotope({
        itemSelector: ".item",
    });
});

有人可以解释这种行为吗？？

更新

这是一个证明问题的方法：http://jsfiddle.net/f35azgdj/2/

注意元素之间是否有一些空格，调整大小时会消失。 BTW由于某种原因，即使在调整大小后，水平间距仍然存在。

另一次更新

我认为它与滚动条有关，因为当我减少元素的数量并且它们在没有滚动条的情况下适合时，它就可以工作。

我认为这意味着在初始载荷中，同位素计算容器大小而不考虑滚动条从中获取一点，因此它认为它具有更大的空间然后它确实具有，因此它相应地定位元素。然后，由于元素使用CSS设置为容器的25％，因此它们的大小是根据较小的容器大小计算的（考虑到滚动条），因此它们之间留有空格。

任何人都可以想到我的一个错误或错误的设置吗？

谢谢！

摩

Answer 1

好的，所以我发现了这个问题，据我所知，这个错误。

当你有更多元素然后是屏幕大小时会发生这种情况，因此会出现一个垂直滚动条。

此滚动条占据了屏幕的一些空间，因此容器div现在变小了。

问题是同位素在滚动条出现之前计算容器的大小，所以它认为有更多的空间，并相应地定位元素。

然后根据容器的正确大小计算元素本身，这意味着它们稍微小一点，这会导致它们之间出现空白。另一个影响是它们从容器的大小溢出，因此也出现水平条。

调整大小时，会重新计算容器大小，这次考虑垂直条，所以这一切都得到修复。

所以解决方案：

选项一：在第一次计算完成后立即重新计算容器。我发现这很有效：

$container.imagesLoaded(function () {
    $container.isotope({
        itemSelector: ".item",
        isOriginLeft: false,
    });
    $container.isotope();
});

请注意第二次调用$container.isotope()。这将有效，但会有一个双重调整大小的效果，并且还有一个轻微的时刻，你将有一个水平滚动条。但它不会强迫你总是有一个垂直滚动条，如选项2所示。

选项2 ：在页面上添加一个永远在线的垂直滚动条。这将有助于同位素正确计算容器，同时考虑滚动条。

html {overflow-y: scroll;}

无论如何，我仍然不确定这是否是我需要以不同方式配置的错误。会喜欢你的想法。同时这解决了我的问题，所以直到找到更好的解决方案，我想我会把它标记为解决方案。

谢谢！

摩

Answer 2

除了html {overflow-y: scroll;} CSS之外，还可以向图片添加display: block以移除图片下方的额外空间。见http://jsfiddle.net/f35azgdj/6/

Answer 3

我通过谷歌寻找类似问题的答案来解决这个问题。我的流体同位素布局表现得很糟糕：有时它没问题，有时会出现太多的空白区域或图像重叠。

就我而言，这是因为我对同位素物品进行了css过渡。我猜同位素测量物品时它们仍处于动画状态：在调整大小时，它们开始转换为其他值（由于我的宽度是视口和转换属性的百分比），因此同位素开始用错误的值进行数学运算

由于我只需要动画变换，我改变了

.grid-item {
  transition: 400ms all;
}

到

.grid-item {
  transition: 400ms transform;
}

没关系。

也许这会节省一些时间。

Answer 4

我遇到了同样的问题，解决此问题的唯一方法是添加html {overflow-y: scroll;}，但它破坏了某些模式布局。因此，我在html和overflow-y: scroll;中使用了一个额外的类，并在使用以下同位素布局安排后立即将其删除：

$grid.one( 'arrangeComplete', function() {
  ...
});

我希望它会有所帮助。顺便说一句，我不明白为什么这个问题不为人所知和解决...

元素之间的同位素空白直到调整大小

4 个答案: