微信小程序 - [开箱即用] 实现瀑布流布局功能示例，支持改为自定义容器、图片列表自动计算布局，类似小红书瀑布流的列表布局（详细示例源码及注释，一键复制粘贴快速使用）

已于 2024-09-12 15:48:20 修改
阅读量6.6k 收藏 11
点赞数 3
分类专栏： 前端组件与功能(开箱即用) 文章标签： 微信小程序 小程序瀑布流布局详细教程 微信小程序实现图片列表瀑布流 微信小程序仿小红书瀑布流布局 程最好的瀑布流布局方案详细教程
于 2023-05-16 21:56:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50545213/article/details/130714722
版权
本博客提供无第三方依赖的微信小程序瀑布流布局示例，适用于图片列表，类似小红书的效果。示例代码稳定可靠，可一键复制并灵活改造。包括Vue兼容性，详细教程覆盖各种应用场景。
摘要由CSDN通过智能技术生成

效果图

其他教程都很乱，而且布局都存在bug。本博客的示例代码无任何第三方依赖，非常稳定可靠。

在微信小程序项目开发中，实现瀑布流的布局示例代码，类似小红书瀑布流，可随意进行改造（比如做成纯图片、DIY 容器），丝滑流畅！

Vue2 | Vue3 都能用，你直接复制代码运行下面的示例，保证百分百可用，稍微改改样式就能用了。

在这里插入图片描述

示例源码

一键复制，运行。

<view
了解本专栏 订阅专栏 解锁全文
街尾杂货店&
关注
专栏目录
订阅专栏
微信小程序实现瀑布流 仿小红书
weixin_42757570的博客
07-31 7785
要做的小红书瀑布流效果 homepage.wxml代码 <!-- 瀑布流大概的思路就是，直接定义两列等宽的view，然后两列都加载相同的数据 wx:if="{{index%2==1}}" 这里，用if来辨别是奇数还是偶数，两边加载相反的 --> <view class="content"> <view class="left"> <block wx:for="{{noramalData.tuijain}}" wx:key="ind
瀑布流式页面布局_微信小程序——实现简单的瀑布流式布局
weixin_39661129的博客
11-25 2185
写页面时，考虑到美观，良好的用户体验，对于内容的展示我们经常会用到瀑布流式布局，那么如何实现一个简单的瀑布流呢？瀑布流式布局原理：遍历数组判断奇偶性，然后分左右排布，左右两边代码基本一致直接上代码：index.wxml //index.wxml <!-- 推荐&精选 --> <view class="activity_recommend" wx:if="{...
微信小程序-微信小程序－瀑布流布局
08-06
微信小程序－瀑布流布局 说明： 实现瀑布流布局和无限下拉加载功能。 数据接口: https://api.getweapp.com/vendor/tngou/tnfs/api/list 目录结构： pages — 存放项目页面文件 开发环境： 微信web开发者工具 v0.11.112301 项目截图： https://www.getweapp.com/project?projectId=583a6886e8ff074c22472f2f
微信小程序开发中瀑布流布局和图片懒加载
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
08-03 1304
通过以上的介绍，相信你已经了解了如何在微信小程序中实现瀑布流布局和图片懒加载，并能够结合实际项目需求进行灵活运用。在实际开发过程中，还需要不断地进行测试和优化，确保页面的性能和用户体验。此外，随着技术的发展，未来还会有更多新的技术和方法出现，我们应该保持学习的态度，不断提升自己的技术能力。希望本篇文章对你有所帮助，如果你在实现过程中遇到任何问题，欢迎随时留言讨论。祝你在微信小程序开发的路上越走越远！欢迎来到我的博客，很高兴能够在这里和您见面！
微信小程序的瀑布流布局
m0_66475027的博客
06-05 773
代码的话建议去github上搜下,不过这里为了方便阅读,这里之间粘贴过来了,我这里给那个demo里的代码添加了下几个注释。
微信小程序图片瀑布流布局demo
12-13
微信小程序图片瀑布流布局demo
微信小程序实现瀑布流
Ssss555123的博客
10-23 769
2.遍历数组，通过wx.getImageInfo获取到每个元素图片的宽度和高度(需要配置download的域名)5.别忘给image属性加上mode="widthFix"，高度自适应，保持宽高比。1.由于是左右两排照片而且左右照片每排的每个都有高度,需要先定义变量，4.最后 this.setData，数据驱动视图，在前端渲染这些数据。3.判断这个元素应该是放在左边还是右边(放在数组高度低的一边)我用的是递归的方法，如果要是改用循环的话可能还要复杂一些。
微信小程序UI瀑布流布局源码范例.rar
07-10
微信小程序UI瀑布流布局源码范例，这是个比较流行的布局了，在WEB开发、移动开发中，都经常见到瀑布流，那么在微信小程序中如何实现瀑布流呢？本源码会给你一个容易理解的答案，你会通过这个小程序源码快速学习如何在微信的小程序中实现瀑布流布局，效果请参见截图所示。
微信小程序实现瀑布流实例
xiyunmengyuan的博客
12-12 2497
瀑布流的效果图如下： 1.wxml中的代码如下 <!--pages/lsittest/listtest.wxml--> <view class="containers"> <view id="left"> <view style="margin-bottom:20rpx;" wx:for="{{leftList}}" wx:key> ...
微信小程序瀑布流
08-22
微信小程序瀑布流
微信小程序-瀑布流布局案例
04-08
这个案例采用的是瀑布流的写法编写的一个小程序案例，可供大家参考参考。具体实现功能请看代码。
微信小程序 瀑布流布局
weixin_39378610的博客
07-21 1646
今天做小程序的时候，碰到一个比较常见的需求，就是要瀑布流布局，两列，交错分布，大概如下图   最终要实现的结果就是如左图所示。 不过在微信小程序里面，不能通过JavaScript来直接操作dome，所以一些常用的方法在这里都没有办法用了。这让笔者非常着急，因为项目比较赶，不能因为这种低级的布局问题拖慢了进度。 百度了半天，发现了css3的column这个属性，但是最后实现出来的方法就如...
微信小程序--瀑布流
雨Winning
07-02 6393
Lin-ui瀑布流学习
微信小程序-第四天
weixin_49021391的博客
10-23 183
【代码】微信小程序-第四天。实现瀑布流
微信小程序 - - - -瀑布流
weixin_47335802的博客
05-12 262
js页面数据 操作步骤 1.定义page 和 页面data里面的goods 2.瀑布流事件 3.判断是否最大页面 并触发提示事件 4.定义一个传到后台的对象 5.成功回调函数获取数据 6.拼接现在的数据和以前的数据 7.page++ 9.数据刷新 ...
微信小程序实现瀑布流布局与无限加载
微信小程序中实现瀑布流布局主要依赖于`<image>`组件的`bindload`事件来获取图片尺寸，并通过JavaScript处理图片的布局。结合无限滚动，我们可以创建出一个流畅且具有视觉吸引力的图片展示页面。在处理过程中，要...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

街尾杂货店&

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值