小程序瀑布流布局的实现方案_小程序瀑布流式页面布局-CSDN博客

本文链接：https://blog.csdn.net/haoyanyu_/article/details/107827816

本文介绍了小程序中实现纵向瀑布流布局的两种方法：一次性渲染所有元素和动态加载新数据。通过CSS的column-count属性可以快速实现简单瀑布流，但无法满足数据动态加载和顺序要求。对于动态加载，采用WXML两列布局，通过维护列高和按需插入数据，确保新数据准确插入较短列。此外，文章还提到在PC和H5中Masonry插件的使用。

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

文章目录

1. 瀑布流布局

瀑布流分为横向和纵向，前者是每个元素高度固定，宽度参差不齐；后者是宽度相对固定，高度不一。
虽然展现的效果不太一样，但实现原理差不多，大同小异，以下内容主要基于实际项目遇到的情况来总结的

2. 纵向瀑布流

宽度固定的瀑布流可能有两类情况：

一种是初始化时拿到所有数据渲染，全程渲染一次，不在乎排列顺序；
一种是注重排列顺序或者懒加载的，例如滚动到底部加载新数据；

2.1 一次性渲染所有元素

CSS中column-count可以设置内容展示的列数，可以通过设置column-count: 2将子元素分两列展示，从而实现简单的瀑布流布局

column-count的具体使用方法可以看张鑫旭大佬的博客⬇️
https://www.zhangxinxu.com/wordpress/2019/01/css-css3-columns-layout/

页面布局代码大体如下：

// wxml
<view>
  <view class="layout-column">
    <view wx:for="{
    {list}}" wx:index="index" wx:item="item" wx:key="index" class="card">
      <view>
        <text class="card-title">卡片{
  {index + 1}}</text>
        <view class="card-img">我是一张图</view>
        <text class="card-name">卡片内容内容很多内容</text>
      </view>
    </view>
  </view>
</view>
// wxss
.layout-column {
  column-count: 2;
  padding: 32rpx;
}
.card {
  break-inside: avoid;
  border: 1rpx solid #dfdfdf;
  padding: 16rpx;
  margin-bottom: 16rpx;
  border-radius: 6rpx;
}
 
.card-title,
.card-name {
  line-height: 2em;
  color: #232323;
  font-size: 32rpx;
}
 
.card-img {
  height: 120rpx;