微信小程序瀑布流先记录一下链接，过段时间在整理一下

最新推荐文章于 2025-08-01 10:42:30 发布

X.Py

最新推荐文章于 2025-08-01 10:42:30 发布

阅读量352

点赞数 1

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签：小程序

本文链接：https://blog.csdn.net/qq_45301392/article/details/119940240

微信小程序专栏收录该内容

13 篇文章

订阅专栏

暂时总结了两种类型：

一、【实时加载】的瀑布流实现方式：

目的：使用瀑布流的目的是：在视图不卡顿的情况下，源源不断的流畅展示更多图片。
原理：
1 将视图分为两列、三列或者多列。
2 随着滚动条的下拉，页面加载更多的图片。
3 新增加的图片自动添加到高度最小的列当中。

上图如下

第一种方式
css 布局如图所示，大体一样就可以，这里不贴代码了。
js：这里以小程序为例：

<!--隐藏列表 1、用于计算的隐藏image的 数据源 -->
<!--
bindload、binderror 
不管图片加载成功还是失败，
都需要触发一下对应的函数：
	1 用来获取当前加载完图片的高度
	2 将高度进行一个累加，然后通过计算得出的高度来判断：这张图片应该加在左列还是右列。
-->
<view class="hide-shop">
	<image 
		wx:for="{{allPic}}" 
		src="{{item.src}}" 
		data-src="{{item.src}}" 
		data-ind="{{index}}" 
		wx:key="*this"
		bindload="imageload"  
		binderror="imageloaderr"
	/>
</view>


<!--展示列表-->
<view>
	<!--左侧列表-->
	<view>
	    <block wx:for="{{leftlist}}">
            <image mode="widthFix" lazy-load="{{true}}" src="{{item}}"/>
		</block>
	</view>
	<!--右侧列表--->
	<view>
	    <block wx:for="{{rightlist}}">
            <image mode="widthFix" lazy-load="{{true}}" src="{{item}}"/>
		</block>
	</view>
</view>

Page({
	data:{
		allPic:[], // 储存全部的图片：1、用于计算的隐藏image的 数据源 2、用来判断图片是否全部加载完。
		
		// 通过两个可以更新的变量来存储左右两侧的图片
	    leftlist:[], // 左侧列表图片
	    rightlist:[], // 右侧列表图片
	},
 	leftHeight: 0,
  	rightHeight: 0,
  	lin_allPic:[],
  	s_leftlist:[],
  	s_rightlist:[],
	onLoad() {
		this.getPhotolist()
	},
	// 1 页面初始化 加载图片列表数据
	getPhotolist(){
	  const that = this;
	  wx.request({
		// ...options
	  	success(res){
	  		const list = []; // list:[ { url:"...", } ]
			if(res.list.length){
				res.list.map(item => list.push({ src:item.url, }))
				that.setData({ 
					allPic:[...that.data.allPic, ...list],
					curPageNum: curPageNum+1
				})
        	} else wx.hideLoading()
		},
	  })
	},
	// 2 图片加载完成
	imageload(e){
	    const that = this;
	    // html 中存储 src 提图片地址，index 渲染序号
	    // 渲染序号用于判断最后一个是否加载完
	    const { height, width } = e.detail;
	    const { src, ind, } = e.currentTarget.dataset;
	    const picHeight = (height * 750) / width;
	    const leftadd = () =>{
	      that.s_leftlist.push(src)
	      that.leftHeight += picHeight;
	    }
	    const rightadd = () =>{
	      that.s_rightlist.push(src)
	      that.rightHeight += picHeight;
	    }
	    // 判断逻辑
	    if( ind%2 ) {
	      if( this.leftHeight < this.rightHeight ) leftadd()
	      else rightadd()
	    } else {
	      if( this.leftHeight < this.rightHeight ) leftadd()
	      else rightadd()
	    }
	    that.lin_allPic.push(src)
	    that.isRender()
	},  
	// 3 图片加载失败 默认添加一个图片
  	imageloaderr(e){
	    const src = "https://img1.baidu.com/it/u=606394262,1008040175&fm=26&fmt=auto&gp=0.jpg"
	    const that = this;
	    const { ind, } = e.currentTarget.dataset;
	    // html 中存储 src 提图片地址，index 渲染序号
	    // 渲染序号用于判断最后一个是否加载完
	    const leftadd = () =>{
	      that.s_leftlist.push(src)
	      that.leftHeight += 400;
	    }
	    const rightadd = () =>{
	      that.s_rightlist.push(src)
	      that.rightHeight += 400;
	    }
	    // 判断逻辑
	    if( ind%2 ) {
	      if( this.leftHeight < this.rightHeight ) leftadd()
	      else rightadd()
	    } else {
	      if( this.leftHeight < this.rightHeight ) leftadd()
	      else rightadd()
	    }
	    that.lin_allPic.push(src)
	    that.isRender()
  	},	 
  	// 4 统一渲染 
  	isRender(){
		const that = this;
		if(that.lin_allPic.length == this.data.allPic.length){
		  // 加载完成...
		  this.setData({ 
		    leftlist: that.s_leftlist,
		    rightlist: that.s_rightlist,
		  },()=>{
		    wx.hideLoading()
		  })
		} else {
		  // 加载中...
		}
	},
	// 页面触底加载新作品
	onReachBottom(){
	  this.getPhotolist()
	  wx.showLoading({ title: '加载中', })
	}
})