Jason

也要考虑业务本身，这种瀑布流的实现，尤其是移动端一般就两列，**可能**不需要DP甚至更高深的算法，因为求出最小高度差对业务不一定有最高价值，这些数据是有原始顺序的！ 例如是一个店铺排行榜，或是热门推文的瀑布流，其本身顺序的价值也很重要，如果为了求出最小高度差，而打乱了整体的顺序，就跑偏啦。 因此可以退到最简单的思路，准备n个数组，遍历所有数据，计算n个数组的**内容高度总和**，哪个小，push到哪个数组… 既可以保证整体的顺序不被打乱太多，也可以保证所有列的高度差不会太极端。

```css .text-box { height: 14px; display: flex; align-items: center; } ``` 几个月下来，感觉用line height垂直居中简直体验差，不同设备百花齐放。但是 align-items: center; 就基本各端一致了。缺点就是只能用flexbox，像ellipsis这样溢出点点点就不能用了，可以尝试在外面套一层容器来实现，值不值得看业务吧。。

@stormqx @shellphon 最近也在探索DOM回收的情况，如果是等高的列表可以直接考虑虚拟列表https://github.com/hilongjw/vue-recyclerview ，然而我这需求是个瀑布流，不好直接计算所有卡片的高度。 所以参考了lazysizes的思路，通过$refs直接拿到所有的card，添加**一个滚动监听器**，forEach计算所有卡片所在位置，如果在可视范围之外，设置flag给card组件，card组件内部根据这个flag决定渲染内容或空白占位DOM。（使用了Vuejs） lazysizes里是通过特定的classname来拿到所有card，然后遍历，思路差不多，可以参考一下

> > > @stormqx @shellphon 最近也在探索DOM回收的情况，如果是等高的列表可以直接考虑虚拟列表https://github.com/hilongjw/vue-recyclerview ，然而我这需求是个瀑布流，不好直接计算所有卡片的高度。 > > > 所以参考了lazysizes的思路，通过$refs直接拿到所有的card，添加**一个滚动监听器**，forEach计算所有卡片所在位置，如果在可视范围之外，设置flag给card组件，card组件内部根据这个flag决定渲染内容或空白占位DOM。（使用了Vuejs） > > > lazysizes里是通过特定的classname来拿到所有card，然后遍历，思路差不多，可以参考一下 > > > > > > 虚拟列表挺好的，还有需要考虑的点是数据更新时的滚动条位置问题。毕竟滚动条是模拟出来的。 > > 尝试用了虚拟列表dom，但是有些问题，比如我向下滚动后又向上滚动导致之前渲染过的节点又要重新渲染一遍，而且向上滚动过快的话会出现白屏体验上比较差，是不是我开发姿势又问题？ 虚拟列表可不就是只渲染部分DOM，节省内存啊。这就是性能和某方面体验的权衡吧。建议优化思路： 1. 增加虚拟列表实际渲染的DOM的容器高度，使其不至于回收太频繁 1. 白屏用彩色或者特定图案代替，看起来会好很多

Actually ,me too!!! The same situation...