如何用uniapp实现小程序瀑布流布局的代码改写？

本文共计1096个文字，预计阅读时间需要5分钟。

一、前言+现在写瀑布流不算创新吧？+我不管，我就要写，谁也别想拦我。+瀑布流应该算是很常见的一种布局方法了，大致的思路也很好理解，但在小程序里确有额外需求。

一、前言

现在写瀑布流算不算是炒冷饭啊？

我不管， 我就要写，谁也别想拦我。

瀑布流应该算是很常见的一种布局方法了，大致的思路也很好理解， 但是在小程序里面确有另外需要考虑的几个问题。

问题1：uniapp是基于Vue的，所以不好直接操作DOM。

问题2：uniapp基于Vue，但也做了一些修改，所以不好拿ref来操作

二、先说思路

为了保证文章的长度，以及有些小伙伴对瀑布流的基本思路不是很了解，所以先讲讲瀑布流的思路，先看下图。

可以看到，商品的图片高度是不一致的，再加上商品标题的行数不一致，最终呈现的效果是交错排列的。

之前在开发过程中，我也试过用CSS的Flex布局，Column布局来实现，勉强能实现同样的效果，但是最终对接后台要考虑商品的热度优先，所以只能放弃。

Flex实现缺点：使用Flex布局并不能准确计算高度来插入商品。

Column实现缺点：使用Column布局不好操作先后顺序。

PS：如果对产品排序没有要求的话， 可以考虑纯CSS实现，这里不多赘述，掘金里很多的。