# 传统实现方式 > 当前文章的`gif`文件较大，加载的时长可能较久这里我拿小红书的首页作为分析演示 ![xhs2.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c83d1de8a90e46d5beff578cd9654bd3~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1280&h=692&s=3971327&e=gif&f=312&b=f2efea) 可以看到他们的实现方式是传统做法，把每个元素通过获取尺寸，然后算出`left`、`top`的排版位置，最后在每个元素上设置偏移值，思路没什么好说的，就是算元素坐标。那么**这种做法有什么缺点**？请看下面这张图的操作 ![xhs.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b4f0486ff2324d9ab854303da6c711eb~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1280&h=692&s=9508373&e=gif&f=197&b=f2f0ea) 1. 容器尺寸每发生一次变化，容器内部所有节点都需要更新一次样式设置，当页面元素过多时，窗口的尺寸变动卡到不得了； 2. 实现起来过于复杂，需要对每个元素获取尺寸然后进行计算，不利于后面修改布局样式； 3. 每一次的容器尺寸发生变动，图片元素都会闪烁一下（电脑好的可能不会）； # 最佳实现方式 > 吐槽：早在`2019`年我就将下面的这种实现方式应用在小程序项目上了，但是目前还没见到有人会用这种方式去实现，为什么会没有人想到呢？表示不理解。 - [代码仓库](https://github.com/Travis-hjs/waterfall-list-vue) - [预览地址](https://huangjingsheng.gitee.io/hjs/waterfall/#/better) - [备用预览地址](https://travis-hjs.github.io/#/better) 先看一下效果 ![show.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cf134c856b4f4fdf9ec049bb6de5c376~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=888&h=480&s=11744939&e=gif&f=242&b=f2f0eb) 在上面的预览地址中，打开控制台查看节点元素，可以看到是没有任何的`js`控制样式操作，而是全部交给`css`的自适应来渲染，我在代码层中只需要把数据排列好就行。 ## 实现思路这里我将把容器里面分为`4`列，如下图 ![微信截图_20240312210833.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/48f26fdb61e247f7ac9719a1ee1328ca~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1679&h=932&s=633066&e=jpg&b=f7f3f1) 然后再在每列的数组里面按顺序添加数据即可，这样去布局的好处既方便、兼容性好、浏览器渲染性能开销最低化，而且还不会破坏文档流，将操作做到极致简单。剩下的只需要怎样去处理每一列的数组即可。 ## 处理数组逻辑由于是要做成动态列，所以不能固定`4`个数组列表，那就做成动态对容器输出`N`列，最后再对每一列添加数据即可。这里我用`ResizeObserver`去代替`window.onresize`，理由是在实际应用中，容器会受到其他布局而影响，而非窗口变动，所以前者更精确一些，不过思路做法都是一样的。 - 设置一个变量`column`，代表显示页面有多少列； - 声明一个变量`cacheList`，用来缓存接口请求回来的数据，也就是总数据； - 然后监听容器的宽度去设置`column`的数量值； - 最后用`computed`根据`column`的值生成一个二维数组进行页面渲染即可； ```ts import { ref, reactive, computed, onMounted, onUnmounted } from "vue"; /** 每一个节点item的数据结构 */ interface ItemInfo { id: number title: string text: string /** 图片路径 */ photo: string } type ItemList = Array; const page = reactive({ /** 页面中出现多少列数据 */ column: 4, update: 0, }); const pageList = computed(function() { const result = new Array(page.column).fill(0).map((_, index) => ({ id: index, list: [] as ItemList })); let columnIndex = 0; page.update; // TODO: 这里放一个引用值，用于手动更新； for (let i = 0; i < cacheList.length; i++) { const item = cacheList[i]; result[columnIndex].list.push(item); columnIndex++; if (columnIndex >= page.column) { columnIndex = 0; } } console.log("重新计算列表 !!----------!!"); return result; }); let cacheList: ItemList = []; async function getData() { page.loading = true; const res = await getList(20); // 接口请求方法 page.loading = false; if (res.code === 1) { cacheList = cacheList.concat(res.data); // TODO: 手动更新，这里不把`cacheList`放进`page`里面是因为响应数据列表过多会影响性能 page.update++; } } let observer: ResizeObserver; onMounted(function() { getData() observer = new ResizeObserver(function(entries) { const rect = entries[0].contentRect; if (rect.width > 1200) { page.column = 4; } else if (rect.width > 900) { page.column = 3; } else if (rect.width > 600) { page.column = 2; } }); observer.observe(document.querySelector(".water-list")!); }); onUnmounted(function() { observer.disconnect(); }) ``` 这里有个细节，我把`page.update`丢进`computed`中作为手动触发更新的开关而不是把`cacheList`声明响应式的原因是因为页面只需要用到一个响应数组，如果把`cacheList`也设置为响应式，那就导致了数组过长时，响应式过多的性能开销，所以这里用一个引用值作为手动触发更新依赖的方式会更加好。这样一个基本的瀑布流就完成了。 ## 更完美的处理细心的同学这时已经发现问题了，就是当某一列的图片高度都很长时，会产生较大的空隙，因为是没有任何的高度计算处理而是按照数组顺序的逐个添加导致，像下面这样。 ![微信截图_20240312213804.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/182dad7673ba4e7fa7959d34b2ba3662~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1260&h=932&s=235904&e=jpg&b=fcfafa) 所以这里就还需要优化一下逻辑 - 在获取数据时，把每一个图片的高度记录下来并写入到总列表中 - 在组装数据时，先拿到高度最低的一列，然后将数据加入到这一列中 ```ts /** * 加载所有图片并设置对应的宽高 * @param list */ async function setImageSize(list: ItemList): Promise { const total = list.length; let count = 0; return new Promise(function(resolve) { function loadImage(item: ItemInfo) { const img = new Image(); img.src = item.photo; function complete(target: T) { count++; item.width = img.width; item.height = img.height; if (count >= total) { resolve(list); } } img.onload = () => complete(img); img.onerror = function() { item.photo = defaultPic.data; complete(defaultPic); }; } for (let i = 0; i < total; i++) { loadImage(list[i]); } }); } async function getData() { page.loading = true; const res = await getList(20); // page.loading = false; if (res.code === 1) { const list = await setImageSize(res.data); page.loading = false; cacheList = cacheList.concat(list); // TODO: 手动更新，这里不把`cacheList`放进`page`里面是因为响应数据列表过多会影响性能 page.update++; } } const pageList = computed(function() { const result = new Array(page.column).fill(0).map((_, index) => ({ id: index, list: [] as ItemList, height: 0 })); /** 设置列的索引 */ let columnIndex = 0; // TODO: 这里放一个引用值，用于手动更新； page.update; // 开始组装数据 for (let i = 0; i < cacheList.length; i++) { const item = cacheList[i]; if (columnIndex < 0) { // 从这里开始，将以最低高度列的数组进行添加数据，这样就不会出现某一列高度与其他差距较大的情况 result.sort((a, b) => a.height - b.height); // console.log("数据添加前 >>", item.id, result.map(ele => ({ index: ele.id, height: ele.height }))); result[0].list.push(item); result[0].height += item.height!; // console.log("数据添加后 >>", item.id, result.map(ele => ({ index: ele.id, height: ele.height }))); // console.log("--------------------"); } else { result[columnIndex].list.push(item); result[columnIndex].height += item.height!; columnIndex++; if (columnIndex >= page.column) { columnIndex = -1; } } } console.log("重新计算列表 !!----------!!"); // 最后排一下原来的顺序再返回即可 result.sort((a, b) => a.id - b.id); // console.log("处理过的数据列表 >>", result); return result; }); ``` 这样就达到完美的效果了，但是每次获取数据的时候却要等一会，因为要把获取回来的图片全部加载完才进行数据显示，所以没有基础版的无脑组装数据然后渲染快。除非然让后端返回数据的时候也带上图片的宽高（不现实），只能在上传图片的操作中携带上。 ## 终极版有没有一种几不需要组装数据，也不需要获取图片尺寸的方法？当然有，答案就是用`css`中的`grid`布局! 在列表容器中 ```css .waterfall-box { --column: 4; display: grid; grid-template-columns: repeat(var(--cloumn), 1fr); align-items: end; grid-gap: 0 20px; padding: 20px 0; } ``` 看到`--cloumn`应该猜到是什么回事了吧，保持上面`ResizeObserver`监听列的操作不变，将`.waterfall-box`动态设置变量即可，最后再处理一下每个 item 中的 `grid-row-end`属性即可 ```html ``` 这样就将所有操作都变成自适应的了，无需关心数据和图片尺寸，也不用分成多个列的节点布局。