2

好的，我不知道为什么会这样......当页面最初加载时：

http://tinyurl.com/af86wv5

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

但是，如果我单击导航菜单（顶部）中的一项来重新布局和过滤缩略图，然后单击其中任何一项以打开最大化的 Galleria 图像库，则缩略图项不会围绕最大化图像不再正确 - 有间隙，空白区域，不一致......为什么？

我想不通。我在做什么错/错过了什么？

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

谢谢！

4

2 回答 2

2

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

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

只是被这个取代了吗？（或者可能改用'masonry' layoutMode）......

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

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

如果您需要在代码中遵循更合乎逻辑的内容，那么您还可以尝试绑定scrollTo()到“transitionend”事件，以确保在为滚动设置动画之前完成同位素。

于 2013-02-16T13:50:17.247 回答
0

我觉得奇怪，你用position: absolute; top: 0; left: 0;然后用translate3d。也许你应该尝试display: inline-block不设置position.

于 2013-02-11T03:30:47.747 回答