小程序瀑布流布局（通过获取两列高度判断实现）

最新推荐文章于 2024-08-03 05:52:51 发布

webMW

最新推荐文章于 2024-08-03 05:52:51 发布

阅读量1.3k

点赞数 3

分类专栏：小程序学习专栏文章标签：小程序 js

本文链接：https://blog.csdn.net/qq_46331926/article/details/105444828

版权

本文介绍了如何在小程序中实现瀑布流布局，通过获取两列高度判断内容的填充位置。首先，理解瀑布流布局的基本概念，然后准备数据，将内容分为两列渲染，并设置相应的样式。接着，详细阐述了实现过程，包括如何判断较短列并处理异步操作。最后，作者提到当前实现的不足，希望能找到更优化的解决方案。

摘要由CSDN通过智能技术生成

1.概述

在实现瀑布流布局之前，首先，需要明白，大致需要实现的样子，此处以两列为例子：在这里插入图片描述
如图，瀑布流布局，是 列宽一致，屏宽等分。而 后续的图文内容，排列在较短一列之后。

2.准备

我所理解的是：将图文分成两列渲染，当获取数据后，把即将渲染的图文内容放在较短列之后，以此实现瀑布流样式的布局

图文数据依列渲染：wxml 代码如下

<!-- 外部容器 -->
  <view id="box_group">
    <!-- 左列 -->
    <view class="list left">
        <view class="group_msg" wx:for="{
   {leftMsg}}">
          <image mode="widthFix" src="{
   {item.url}}"></image>
          <view class="msg_title">{
   {
   item.name}}</view>
          <view class="msg_tips">id：{
   {
   item.id}}</view>
        </view>
    </view>
    <!-- 右列 --