帮我用 JavaScript 创建一个类似 iPad 照片的图库
我一直在尝试与 iPad 的照片应用，缩略图整齐地堆叠在一起，点击（触摸）后它们会飞出一个网格 布局。如果当您单击另一个堆栈时一个图库/堆栈已打开，则在下一组动画显示之前，照片应堆积在其原始位置。
我虽然像 同位素 这样的东西在这里会有帮助，但我真的很难让它停止覆盖自己。另外，我不太清楚如何让缩略图看起来像是从“封面图像”中飞出来的。
我把到目前为止我在 JSFiddle 上得到的内容的简化版本。
非常感谢任何帮助。我觉得我有点不知所措:)
我的问题是：如何使缩略图看起来像是从“封面图像”中飞出来的？
I've been playing around with a gallery similar to that of the iPad's photos app, where you have thumbnails neatly stacked and upon clicking(touching) they fly out in a grid layout. If one gallery/stack is already open when you click another stack, the photos should pile up at their original position before the next set animates out.
I though something like Isotope would be helpful here, but I'm having a real hard time making it stop overwriting itself. Also, I can't quite figure out how to make it seem as if the thumbnails fly out from the "cover image".
I put a simplified version of what I've got so far on JSFiddle.
Any help is greatly appreciated. I feel like I'm in a little over my head here :)
My question is: how do i make it seem as if the thumbnails fly out from the "cover image"?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您可以拥有一个绝对定位的 DIV，其中包含全尺寸图像。
首先，定位 div 并缩放图像，使其与缩略图完美重叠。
然后，对两者的位置和大小进行动画处理，将它们以您想要的大小放置在屏幕中央。
You could have an absolutely positioned DIV with a full-size image inside.
Initially, position the div and scale the image such that it perfectly overlaps with the thumbnail.
Then, animate the location and size of both to bring them to the center of the screen at the size you want.