[前端开发] 如何仿照下面这种布局和滑动效果？

[OkabeRintaro]

公司准备仿制这种东西，试了一下，用了横向瀑布流发现效果并不好。 https://album.kid17.com/#/public/share/?student_id=258823&term=13&nonce_str=7pERfVkY&expires=1656584242&sign=3025577464C6848210DF466A6547CF4B02B35DAA

[Pastsong]

看代码啊，人家带 sourcemap 的源码都给你了

[ToHaveLight]

这不就是个翻书效果嘛，百度一下有很多类似的插件

[OkabeRintaro]

@Pastsong @ToHaveLight 主要是假如说 有十几张图片，怎么屏幕第一页判断是要怎么摆放一两张，第二页摆放四五张

[ccyu220]

这不就是 H5 秀模板编辑器的玩意吗，这就不是瀑布流做出来的东西。

[OkabeRintaro]

@Pastsong 呃呃不好意思，我是前端小菜鸡，请问这个是可以扒下来的吗？怎么扒？扒完怎么看，这种东西上线后不是都会混淆的吗？最后可以再换为 vue 模式吗？我上面这些问题都百度过，但都看不懂，所以还是来虚心请教下。

[OkabeRintaro]

@ccyu220 那是什么，可以推荐下吗？ 是会生成代码的吗？

[OkabeRintaro]

@ccyu220 简单看了一下这个 H5 编辑器，摆放好图片，就只有一个页面给我，也没代码啊，如何融入到公司 App 里面呀？

[Ccbeango]

楼上老哥给你提示了啊 有 sourcemap
打开控制台，点 sources -> 点 page -> 点 webpack:// 可以看到源码

[HAYWAEL]

如果让我实现的话。一个是翻书页的效果 没想象中的难，之前实现过；然后就是单叶排版，我可能会丢个富文本编辑器过去 让运营或着其他去自己配置。

[OkabeRintaro]

@Ccbeango 看到了 已经放到编辑器里了。
@HAYWAEL 富文本编辑器？

[cyrbuzz]

大概是这样：

1. 每个页数用 z-index 叠加在同一个位置上。关键代码是：`position: absolute; z-index: 1`，z-index 按倒序排。

2. 翻页时候用 transform ，父节点控制整体向左移动，子节点再次控制除父节点以外的内容向右移动相同的距离，这时候就会看到左侧内容不变但右边内容渐现的效果，关键代码是双层 DOM：`<div style="transform: translate(-100px, 0)"><div style="transform: translate(100px, 0)"></div></div>`。

3. 增加一个翻页的效果，这个原网页用的 canvas 画的，不过他那个看起来也比较简陋，可以让你们设计切一个图跟着移动增加宽度就好了。

[OkabeRintaro]

@cyrbuzz 谢谢大佬提供内功修炼，那外功的布局我看了源码好像有 30 种模板，又是怎么实现的呀

[zhw2590582]

你这个问题问得太广泛了，你在问怎么写出整个效果，最好是别人帮你完整地写出来一样，其实不如去 github 找找现有的插件

[cyrbuzz]

@OkabeRintaro

啥外功模板= =。

[OkabeRintaro]

@zhw2590582 哎 基础不牢，地动山摇。 经验太少，难以思考
@cyrbuzz 我头脑混乱了，我也不知道我要问的是啥了 - . -、、、、、

[xiaojun1994]

看着是 canvas 画的

[OkabeRintaro]

@Pastsong @Ccbeango 你好，获取到之后，能否在自己电脑运行呢？ 我看源码看到头晕，想跑起来运行下