jQuery Isotope/Masonry - 在重新布局时，排列有点困惑？

Question

好吧，我不明白为什么会发生这种情况...当页面最初加载时:

http://tinyurl.com/af86wv5

点击一个项目，Galleria 就会启动，打开最大化的图像库，并且所有其他缩略图项目都可以完美地围绕最大化的 Galleria div 重新排列，效果很好。

但是，如果我单击导航菜单(顶部)中的一个项目来重新布局和过滤拇指，然后单击其中任何一个来打开最大化的 Galleria 图像库，则缩略图项目不会被显示。不再正确地围绕最大化图像排列 - 存在间隙、空白区域、不一致...为什么？

我想不通。我做错了什么/遗漏了什么？

另外，如何将页面滚动到下一个最大化的图库 div/图像？如果用户单击页面底部的缩略图，最大化的图像将在浏览器底部下方打开 - 我如何以动画方式向下滚动到该特定图像，以便它显示在用户浏览器的顶部，在焦点清晰？

谢谢!

Answer 1

我可以从你的JS中看到，当点击导航项时，$container.isotope({layoutMode:'fitRows'})正在被设置。由于只有选择过滤选项后问题才会开始，这可能会影响网格布局。如果这...是否有助于解决问题

$container.isotope({
    filter: selector,
    layoutMode : 'fitRows',
    animationOptions: {
        duration: 750,
        easing: 'linear',
        queue: false,
    },
});

就被这个取代了？ (或者可能使用“砖石”布局模式代替)...

$container.isotope({
    filter: selector
});

关于你的第二点(滚动到打开的项目)，过去我刚刚在打开项目时在 setTimeout() 函数中使用了 scrollTo() 。它很粗糙，但使浏览器能够在同位素重新排列自身后找到正确的元素位置，任何“打开”或“关闭”逻辑也可以在需要时进入其中执行不同的位。

如果您需要在代码中遵循一些更符合逻辑的内容，那么您还可以尝试将 scrollTo() 绑定(bind)到“transitionend”事件，以确保 Isotope 在动画滚动之前完成。