微信小程序开发，仿小红书瀑布流实现

1. 涉及到的知识点

1. grid-view的使用
2. 官方文档指南：https://developers.weixin.qq.com/miniprogram/dev/component/grid-view.html

2. 功能描述

Skyline 下网格布局容器 和 瀑布流布局容器。基础库版本 2.30.4 起提供 WebView 兼容实现

• 仅支持作为<scroll-view type="custom">模式的直接子节点
• 按需渲染节点，比 WebView 兼容实现具备更好的性能。

3. 通用属性

属性	类型	默认值	必填	说明
type	string	aligned	是	布局方式
aligned				每行高度由同一行中最大高度子节点决定
masonry				瀑布流，根据子元素高度自动布局
cross-axis-count	number	2	否	交叉轴元素数量
max-cross-axis-extent	number	0	否	交叉轴元素最大范围
main-axis-gap	number	0	否	主轴方向间隔
cross-axis-gap	number	0	否	交叉轴方向间隔
padding	Array	[0, 0, 0, 0]	否	长度为 4 的数组，按 top、right、bottom、left 顺序指定内边距

3. 代码实现过程

1. index.wxml布局文件

<view class="toolbar">瀑布流布局</view>
<scroll-view scroll-y style="width: 100%; height: 100%;" type="custom">
	<grid-view type="masonry" cross-axis-count="2" cross-axis-gap="10" main-axis-gap="10">
		<block wx:for="{{gridList}}" wx:key="{{item.id}}">
			<view class="grid-container">
				<image style="width: 100%; height: {{100 * item.height}}px" src="https://picsum.photos/200/{{100 *item.height}}?random={{item.id}}" mode="aspectFill"></image>

				<text class="title">这里的风景好美～</text>
				<view class="grid-bottom-container">
					<view class="bottom-left-container">
						<image src="https://res.wx.qq.com/op_res/lS41C5Xp6y6mfUbelCW8PArEcMwWRuhSohPO46vAiELbhAf56_CwONEDgM2vIVxOlT5KDcSxCkV8xIJ6cg3x2Q" mode="" style="width:38rpx;height:38rpx; border-radius: 50%" />
						<span>binnie</span>
					</view>

					<view class="bottom-right-container">
						<image src="../assets/img_dz.png" mode="" style="width:30rpx;height:30rpx;" />
						<span>6666</span>
					</view>
				</view>
			</view>
		</block>
	</grid-view>
</scroll-view>

瀑布流的实现原理，就是动态设置图片的高度，在代码中可以看到Image的的高度是动态的：
<image style="width: 100%; height: {{100 * item.height}}px" src="https://picsum.photos/200/{{100 *item.height}}?random={{item.id}}" mode="aspectFill"></image>

温馨提示： 仅支持作为 <scroll-view type="custom"> 模式的直接子节点

2. index.wxss样式文件

.toolbar{
	line-height: 200rpx;
	text-align: center;
}


.title{
	margin-top: 20rpx;
	color: #333333;
}


.grid-bottom-container{
 display: flex;
 flex-direction: row;
 margin-top: 10rpx;
 padding-left: 10rpx;
 padding-right: 10rpx;
 justify-content: space-between;

}

.bottom-left-container{
 display: flex;
 flex-direction: row;
 align-items: center;
}

.bottom-right-container{
 display: flex;
 flex-direction: row;
 align-items: center;
}
.bottom-right-container span{
 color: #999999;
}

3. index.js文件

Page({

  /**
   * 页面的初始数据
   */
  data: {
    gridList: [],
  },

  /**
   * 产生一个随机数。用来随机生成不同的图片高度，达到瀑布流效果
   */
   getRandomInt(max) {
    return Math.floor(Math.random() * max)
  },

  /**
   * 模拟一些数据的方法
   */
  generateGridList(childCount, columns) {
    const ans = []
    for (let i = 0; i < childCount; i++) {
      ans.push({
        id: i,
        height: this.getRandomInt(columns) + 1,
      })
    }

    this.setData({
      gridList: ans
    })
  },


  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.generateGridList(10, 3)
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

4. 报错问题，解决方法

错误信息如下：

[ grid-demo-3/index.json 文件内容错误] grid-demo-3/index.json: You need to set the value of the “componentFramework” field to “glass-easel” in the %, as the “renderer” field is set to skyline。More detail: https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/glass-easel/migration.html(env: Windows,mp,1.06.2409140; lib: 3.6.4)

解决方案：这个报错在控制台提示的很明显了，需要在.json文件中设置"componentFramework": "glass-easel" 即可 ，如下图所示

5. 运行效果图