好吧，我不知道为什么会这样……当页面最初加载时：
点击一个项目，Galleria 开始工作，打开最大化的图片库，所有其他缩略图项目都围绕最大化的 Galleria div 完美地重新排列。
但是，如果我单击导航菜单（顶部）中的一项来重新布局和过滤缩略图，然后单击其中任何一项以打开最大化的 Galleria 图像库，则缩略图项不会围绕最大化的图像不再正确排列 - 有间隙、空白区域、不一致......为什么？
我想不通。我做错了什么/错过了什么？
另外，如何将页面滚动到下一个最大化的画廊 div/图像？如果用户单击页面底部的缩略图，则最大化的图像将在浏览器底部下方打开 - 我如何动画向下滚动到该特定图像，以便它显示在用户浏览器的顶部，而不是清晰的焦点？
谢谢！
【问题讨论】：
标签： jquery jquery-masonry jquery-isotope
我可以从您的 JS 中看到，当单击导航项时正在设置 $container.isotope({layoutMode:'fitRows'})。由于问题仅在选择过滤选项后才开始，这可能会影响网格布局。如果这样...是否有助于解决问题？
$container.isotope({
filter: selector,
layoutMode : 'fitRows',
animationOptions: {
duration: 750,
easing: 'linear',
queue: false,
},
});
只是被这个取代了吗？ （或者可能改用'masonry' layoutMode）...
$container.isotope({
filter: selector
});
关于您过去的第二点（滚动到打开的项目），我刚刚在打开项目时在 setTimeout() 函数中使用了 scrollTo()。它很粗糙，但可以让浏览器在 Isotope 重新排列自身后找到正确的元素位置，任何“打开”或“关闭”逻辑也可以进入那里，并在需要时执行不同的位。
如果您需要在代码中遵循更合乎逻辑的内容，那么您还可以尝试将scrollTo() 绑定到“transitionend”事件，以确保在为滚动设置动画之前完成同位素。
【讨论】：
你用position: absolute; top: 0; left: 0;，然后用translate3d，我觉得很奇怪。也许您应该尝试使用 display: inline-block 而不设置 position。
【讨论】：