业务场景 二轮充电业务中，用户充电完成后在订单详情页展示订单相关信息，用户点击分享按钮唤起微信小程序分享菜单，将生成的图片海报分享给微信好友或者下载到本地，好友可通过扫描海报中的二维码加群领取优惠。

> 于水增 ## 故事背景 事情起源于之前做的海报编辑器，自己调试时无意中发现字体渲染好慢，第一反应就是网怎么变慢了，断网了？仔细一看才发现，淦！这几个字体资源咋这么大，难怪网速变慢了呢😁😁。

瀑布流 案例 下两张图分别是京东首页、淘宝首页 可以看到都使用了瀑布流式布局，图片等宽不等高 定义 特点 技术角度 多栏或者说多列（为了保持统一，下面都说栏） 图片等宽不等高，根据图片原比例

基础版虽然看上去基本符合我们的产品需求，但由css可以知道，它的问题是__高度固定__，但业务上我们并不确切知道每个item的高度及所包含的图片的高度。所以接下来我们要解决__动态高度__设定的问题，让每一个item都自动计算自己的高度，而不是通过CSS来手动指定 <…

Multi-columns 首先最早尝试使用纯CSS方法解决瀑布流布局的是CSS3 的Multi-columns。其最早只是用来用来实现文本多列排列（类似报纸杂志样的文本排列）。但对于前端同学来说，他

瀑布流提供了一种错落有致的美观布局，被各种注重交互品味的素材网站（如：花瓣、unsplash）广泛应用。社区也提供了不少瀑布流布局的工具，如：masonry 、colcade 等。常规的实现瀑布流的做法是用 JS 动态的计算“砖块”的尺寸和位置，计算量大、性能差。今天给大家介绍…

在小程序开发中，我们经常会遇到滚动列表查看的需求，那么使用锚点定位来实现可以达到交互体验更加友好的效果，我们看下项目中实现的效果：                                  

最近的一个项目做的是vue组件中的一个应用，「处理滚动列表」，这个应该是很常见的需求了，在项目中遇到的痛点，难点，如何一步步解决的，以及小细节一些优化。 经常会遇到的问题就是初始化了，「还是不能滚动」。那么对于这个而言，我最近用到一些经验是什么呢？ wrapper是父容器，它一…

作者介绍：李超，美团点评前端开发工程师，2 年 WEB 开发经验，现在是美团点评点餐团队的一员。 在我们团队的小程序开发经验系列多篇文章发布以后，你是否对小程序视图层（大众点评点餐小程序开发经验 - 视图层），逻辑层（大众点评点餐小程序开发经验 - 逻辑层），API（官方 API 文档）…