Question

好的，我无法弄清楚为什么会发生这种情况......当页面最初加载时：

http://tinyurl.com/af86wv5

点击一个项目并加入Galleria，打开最大化的图片库，所有其他缩略图项目在最大化的Galleria div周围完美地重新排列就可以了。

但如果我点击导航菜单中的其中一个项目（顶部）来重新布局并过滤拇指，然后点击它们中的任何一个以打开最大化的Galleria图库，缩略图项目不会不再适当地围绕最大化的图像排列 - 有间隙，空白区域，不一致......为什么？

我无法理解。我做错了什么/错过了什么？

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

谢谢！

Answer 1

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

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

刚刚被这个取代？（或者可能使用'砌体'layoutMode代替）......

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

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

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

Answer 2

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

jQuery Isotope / Masonry - 在重新安排时，安排有点搞砸了？

2 个答案: