印刻君

瀑布流布局，我们既能在小红书这类图文网站看到，也能在拼多多、京东和淘宝这类电商网站看到。那么，同样是瀑布流，两种实现方式的优点、缺点是什么呢？如果想用 H5 实现瀑布流，应该用哪一种方案呢？

百亿补贴图片加载非常快，为什么呢？因为百亿补贴先加载了一张模糊小图、再加载了一张清晰大图，用户很难感知到模糊到清晰的过程，误以为图片加载很快。接下来我会先给出证据、再分析原理、并提供关键代码。

最近我在做 H5、小程序的性能优化，其中一项优化，是把 H5、小程序的 jpg、png 图片转换为 webp 格式的图片。我需要判断 H5、小程序的环境是否支持 webp 图片。

23 年 11 月末，拼多多市值超过了阿里。我想写一篇《百亿补贴为什么用 H5》，没有动笔；24 年新年，我想写《新的一年，H5 会如何发展》，也没有动笔。现在，我决定把两篇文章合为一篇，与大家分享。

上滑加载（触底加载）是 H5 常见的功能，今天我们来看下如何实现。 效果如下：分页请求开始前，列表滚动，加载动画出现在屏幕中；分页请求过程中，加载动画一直旋转；分页请求完成后，加载动画被挤出视口。

最近我需要做一个下拉刷新的功能，实现功能后我发现，它需要处理的情况还蛮多，于是我整理了这篇文章。首先我会讲解下拉的原理、根据原理写出初始代码；然后我会一边介绍代码存在的缺陷、一边解决缺陷并做些许优化。

最近我逛热风小程序（一个卖鞋的小程序）时，发现了一个奇特的图片样式。图片的四个圆角是反向的，和常规图片不一样。 思索一番后，我发现想实现这个效果，需要的 CSS 知识还挺多，于是整理这篇文章。

高度固定的轮播图，你肯定经常看到、并知道怎么实现，但高度变化的轮播图呢？我会先解释高度变化的原理，然后说明关键实现，最后再给出原生 H5 和小程序的示例代码。

我使用 HTML 和 CSS 实现了一个蛟龙闹海效果。代码中没有引用图片。我会依次解释如何实现海浪、龙和云朵，接着我会给出整体代码，最后，我会做一个简单的总结。