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

【问题标题】：isotope whitespace between elements until resize元素之间的同位素空白直到调整大小
【发布时间】：2020-05-12 22:28:40
【问题描述】：

我看到了很多关于这个的问题，但没有答案（至少没有一个对我有帮助）。

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

我在 CSS 中设置了每个 div 项的大小为 25%，并且我已将其中的图像设置为填充 div。

我已将同位素设置为仅在加载图像后运行。

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

你知道为什么会这样吗？

这是我的代码：

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",
    });
});

谁能解释这种行为...？

更新

这是一个演示问题的 jsfiddle：http://jsfiddle.net/f35azgdj/2/

请注意元素之间是如何有一些空间的，这些空间在调整大小时会消失。顺便说一句，由于某种原因，即使调整大小后水平间距仍然存在。

另一个更新

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

我认为这意味着在初始加载时 isotope 正在计算容器大小而不考虑滚动条从容器中占用的空间，因此它认为它具有比实际空间更大的空间，因此它相应地定位元素。然后，由于元素使用 CSS 设置为容器的 25%，因此它们的大小是根据较小的容器大小（考虑到滚动条）计算的，因此它们之间会留有空白。

任何人都可以认为这是我这边的错误还是设置错误？

谢谢！

阿莫斯

【问题讨论】：

无法使用 Firefox 在 JSFiddle 上重现，请向我们提供有关您的浏览器的更多信息
铬。我也在 Firefox 上进行了测试，它做同样的事情。您将此添加到 jsfiddle 并且效果很好？
你点击了链接吗？
小提琴也适用于我（Linux Chrome）。疯狂猜测：你是在等到 dom 准备好了吗？
明白了。我点击了链接，发现它不起作用。我添加了所需的库。看这里：jsfiddle.net/f35azgdj/1

标签： jquery-isotope

【解决方案1】：

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

当您的元素数量超过屏幕大小时，就会出现这种情况，因此会出现一个垂直滚动条。

这个滚动条占用了一些屏幕空间，所以容器 div 现在更小了。

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

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

调整大小时，容器大小重新计算，这次考虑竖线，所以都固定了。

所以解决方案：

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

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

注意对$container.isotope() 的第二次调用。这将起作用，但会产生双重调整大小的效果，并且还会有一小会儿您将拥有水平滚动条。但它不会像选项 2 那样强迫您始终使用垂直滚动条。

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

html {overflow-y: scroll;}

无论如何，我仍然不确定这是一个错误还是我需要以不同方式配置的东西。会喜欢你的想法。同时，这解决了我的问题，所以在出现更好的解决方案之前，我想我会将其标记为解决方案。

谢谢！

阿莫斯

【讨论】：

【解决方案2】：

除了html {overflow-y: scroll;} CSS，将display: block 添加到图像以删除图像下方的额外空间。见http://jsfiddle.net/f35azgdj/6/

【讨论】：

谢谢！！由于我相信这种情况（流体\全屏容器）可能很流行，我强烈建议将它写在文档中的某个地方......我真的为此努力奋斗，直到我发现问题\错误......
@desandro 我有同样的问题（Istope，packery layout，with imagesloaded script），overlow-y: scroll 已设置，img { display: block } 也已设置，但是当图像没有缓存，我在 .items 下看到很多填充。
html {overflow-y: scroll;} = 救生员！

【解决方案3】：

我通过谷歌找到了这个问题，寻找类似问题的答案。我的流体同位素布局表现不稳定：有时一切正常，有时空白太多或图像重叠。

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

因为我只需要动画的变换，所以我改变了

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

进入

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

一切都好。

也许这会节省一些时间。

【讨论】：

【解决方案4】：

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

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

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

【讨论】：