瀑布流排版

最新推荐文章于 2024-11-11 22:33:13 发布

master'z

最新推荐文章于 2024-11-11 22:33:13 发布

阅读量661

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/ZXW_Future/article/details/106802606

本文介绍如何实现瀑布流排版，避免左右列长度相差过大问题。通过在数据加载时判断两列长度，优先填充较短一列，适用于小程序端。提供了一种在方案2基础上的优化思路，并给出了代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

此篇文章说明如何实现页面瀑布流排版。

何为瀑布流，先看看效果图。

前言：在此之前，我阅读过其他博主的瀑布流方案，多数人实现方案为以下两种：

方案1、在页面渲染时按照奇偶数交替渲染在左右两列中。

方案2、将请求到的数据按奇偶数分别向两个数组，然后页面中渲染为左右两列。

以上两个方案都存在一个问题，当列表数据量大时，可能会出现左右两边长度相差较大的情况。

我们可以在方案2的基础再优化一下：在向两个数组中添加数据前，我们可以先判断一下两者的长度，优先向长度的短的一方添加数据，注意，一般适合在加载下一页数据时判断两者长短。一般单页数据不会很多可以使用这种方案，如果一次性加载数据条目数很大，可以将数据分段渲染。

方案思路已经说明，没什么好讲，简单粗暴直接上代码，以下通过小程序端实现为示例：

// 请求数据
request(api).then(res=>{    // 数据获取成功
  let leftHeight = 0;   // 左侧列表高度
  let rightHeight = 0;  // 右侧列表高度
  const query = wx.createSelectorQuery()
  query.select('#leftList').boundingClientRect()  // 查询左侧节点
  query.select('#rightList').boundingClientRect() // 查询右侧节点
  query.selectViewport().scrollOffset()
  query.exec( res2=> {
    leftHeight = res2[0].height;    // 赋值当前左侧列表高度
    right