jquery-isotope - 元素之间的同位素空白，直到调整大小

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

任何人都可以解释这种行为......？

更新

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

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

另一个更新

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

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

谁能想到这是我这边的错误还是错误的设置？

谢谢!

阿摩司

Answer 1

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

当您的元素多于屏幕大小时，会出现垂直滚动条。

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

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

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

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

所以解决方案:

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

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

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

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

html {overflow-y: scroll;}

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

谢谢!

阿摩司