瀑布流排版

let leftHeight = 0; // 左侧列表高度 let rightHeight = 0; // 右侧列表高度 const query = wx.createSelectorQuery() query.select('#leftList').boundingClientRect() // 查询左侧节点 query.select('#rightList').boundingClientRect() // 查询右侧节点 query..
摘要由CSDN通过智能技术生成

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

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

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

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

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

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

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

 

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

// 请求数据
request(api).then(res=>{    // 数据获取成功
  let leftHeight = 0;   // 左侧列表高度
  let rightHeight = 0;  // 右侧列表高度
  const query = wx.createSelectorQuery()
  query.select('#leftList').boundingClientRect()  // 查询左侧节点
  query.select('#rightList&
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值