帮我用JavaScript创建一个类似iPad的照片库

Question

我一直在玩一个类似于iPad's photos app的画廊，在那里你可以整齐地堆放缩略图，点击（触摸）它们会以网格布局飞出来。如果在单击另一个堆栈时已经打开了一个图库/堆栈，则在下一个设置动画之前，照片应该堆积在原始位置。

我虽然像Isotope之类的东西在这里会有所帮助，但我真的很难让它停止覆盖自己。另外，我无法弄清楚如何使缩略图从“封面图片”中飞出来。

我放了what I've got so far on JSFiddle的简化版。

非常感谢任何帮助。我觉得我在这里有点过头了:)）

我的问题是：如何让它看起来好像缩略图从“封面图片”中飞出来？

Answer 1

你可以拥有一个绝对定位的DIV，里面有一个全尺寸的图像。

最初，定位div并缩放图像，使其与缩略图完全重叠。

然后，为两者的位置和大小设置动画，使它们以您想要的大小显示在屏幕的中心。