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

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;}

无论如何,我仍然不确定这是一个错误或我需要配置不同的东西.会喜欢你的想法.与此同时,这解决了我的问题,直到出现更好的解决方案,我想我会将其标记为解决方案.

谢谢!

阿莫斯