最近在 Framer 上设计了一个绑定 CMS 数据且附带交互的瀑布流 (Masonry Layout) 页面，网络上资料比较零散，简单来讲讲怎么实现。

功能难点在两个方面：

• 图片动态调整高度
• 瀑布流设计和功能的实现

关于第一点，在 Google 上搜索 framer aspect ratio 很容易就能找到这篇文章：https://www.framer.com/help/articles/using-images-with-unique-aspect-ratios-in-the-cms/

里面提到了这样一个模板：https://masonry.framer.wiki/，而模板里的 Image 组件解决了第一个问题。

这个模板里也实现了一个「假」瀑布流，这实际上是一个双列布局，这种实现方式会让在 CMS 更新的图片只会出现某一列中，并不是我想要做的功能。

解决下一个问题我们用到的是：https://www.framer.com/marketplace/category/photography/?query=free 中的 Objective 模板。

这个模板里已经有很完善的瀑布流布局，里面的 Masonry Layout 再次引用了上面的 Image 组件，所以其实最开始找到这里的话，我们 8 成的问题就解决了。

剩下 2 成的问题是，Image 组件里没有任何可以预设的交互，例如像 https://www.midjourney.com/explore 中的 Hover 效果。

解决最后一个问题的方法是我们可以在项目中新建一个 Component，在里面里引用 Image 和设计实现任何我们希望的效果。

---

回过头来，总结一下步骤：

1. 复制 Objective 模板的 Masonry Layout 到你的项目中（如果只是需要一个静态瀑布流布局到这里就结束了）；
2. 创建Component，比如叫 Interactive Image，并在里面使用原 Image 组件显示图片；
3. 继续在 Interactive Image 中添加自定义交互；
4. 回到 Layer 中，创建一个 Collection Lists，在其中使用 Interactive Image 并绑定数据；
5. 将 Masonry Layout 关联的数据列表更换为你的 Collection Lists；

付费的方案我没有怎么检索，上面这个已经很快捷了。

顺带一提，封装好的 Image 和 Masonry Layout 的 tsx 文件也会一起放到项目里，有兴趣了解在代码层面布局是怎么实现的可以看这篇文章：https://blog.7linternational.com/build-a-layout-system-with-framer-e8ea577ff608

最后，我是怎么快速又刚好找到 Objective 这个这么适合的模板的呢？

凭借对摄影的直觉。

下一个开始研究怎么免费实现的 Dynamic CMS Filtering。

2024-10-17更新：疑似由于 Farmer 月初的更新，这里提到的瀑布流组件已失效。