瀑布流

使用grid实现

1. 通过grid-auto-rows属性设置grid元素的基准行高
2. 设置grid元素的align-items属性值为start，目的是取消其自动拉伸行为
3. 设置grid的每一行自动填充，grid-template-columns: repeat(auto-fill, calc(50% - 5px))
4. 接着动态获取每个grid元素的clientHeight，让其除以基准行高并向上取整后加上一个间隔距离值：const girdHeight = Math.ceil(height / 5) + 2
5. 最后将计算好的grid元素实际高度赋值给grid-row-end属性即可

itemList[i].style.gridRowEnd = `span ${girdHeight}`

我的这个例子是用原生 JS 写的，对于 Vue和React，可以根据这个思路，将grid元素封装成子组件，在子组件挂载阶段获取元素的clientHeight并计算出实际的grid元素高度即可

滚动歌词

因为歌词文件的文本格式通常都是一段歌词正文和时间轴组合而成的，所以大致的实现思路可以分为以下步骤

1. 通过接口获取到歌词文本内容
2. 解析歌词得到一个数组对象，每个对象至少要包含有时间轴信息和歌词正文信息
3. 预先设定好的每句歌词的行高和歌词列表容器的高度
4. 根据解析好的歌词数组对象动态创建一个列表
5. 监听播放器的timeupdate事件得到当前歌词的数组下标，然后计算出偏移量

购物车动画

高度自动的过渡效果

Ripple波纹按钮