写一个微信小程序瀑布流

最新推荐文章于 2025-10-21 18:07:51 发布

原创最新推荐文章于 2025-10-21 18:07:51 发布 · 245 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

踩坑同时被 2 个专栏收录

12 篇文章

订阅专栏

微信小程序

1 篇文章

订阅专栏

本文介绍了一种在未知图片比例的情况下实现两列布局瀑布流的方法。利用微信小程序的wx.getImageInfo()方法获取图片尺寸，并通过递归算法将图片加载到高度较小的一列中，以确保视觉效果的平滑过渡。

部署运行你感兴趣的模型镜像

两列布局瀑布流

参考 https://github.com/ivanYF/minapp

瀑布流 操作，未知图片比例的前提下，loading图片，分析宽高 放入正确的view轨道 end

· 关键的一句话“未知的图片比例”，刚好遇到的就是这样的情况，微信小程序下有 wx.getImageInfo() 这个方法，解析图片得到高度，再判断各列长度是否达到阈值，放入高度较小的那一列.

wx.getImageInfo() 是异步函数，参考以下链接才发现，使用递归解决。

https://developers.weixin.qq.com/community/develop/doc/000606ccd70630b3a4478156a56800

您可能感兴趣的与本文相关的镜像

EmotiVoice

AI应用

EmotiVoice是由网易有道AI算法团队开源的一块国产TTS语音合成引擎，支持中英文双语，包含2000多种不同的音色，以及特色的情感合成功能，支持合成包含快乐、兴奋、悲伤、愤怒等广泛情感的语音。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

izhuoo

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

微信小程序制作瀑布流

xiaowude_boke的博客

12-21

1032

微信小程序制作瀑布流

微信小程序的开发之瀑布流功能

这是我的博客

06-15

2411

就直接上代码啦~~~  <view class="content"> <view class="left"> <block wx:for="{{note}}" wx:key=""> <template is=&quo

参与评论您还未登录，请先登录后发表或查看评论

微信小程序 瀑布流布局

03-29

今天做小程序的时候，碰到一个比较常见的需求，就是要瀑布流布局，两列，交错分布，大概如下图 (此图片来源于网络，如有侵权，请联系删除! ) 最终要实现的结果就是如左图所示。不过在微信小程序里面，不能通过JavaScript来直接操作dome，所以一些常用的方法在这里都没有办法用了。这让笔者非常着急，因为项目比较赶，不能因为这种低级的布局问题拖慢了进度。百度了半天，发现了css3的column这个属性，但是最后实现出来的方法就如右图所示，这不符合需求，需求是两列，从左到右进行排列的，大概就像小红书APP那种瀑布流布局 (此图片来源于网络，如有侵权，请联系删除! ) 最后笔者终于找到一种非常诡异

【瀑布流大全】分析原理及实现方式(微信小程序和网页都适用)

最新发布

Una的博客

10-21

860

无论是微信小程序还是网页，我们主要掌握思路，努力实现就行！瀑布流的实现有很多种方法，选择其中一种完成需求。一篇带你搞定瀑布流的流行实现方式，欢迎讨论，研究出更好的实现方法！

微信小程序--瀑布流

雨Winning

07-02

6825

Lin-ui瀑布流学习

微信小程序 - - - -瀑布流

weixin_47335802的博客

05-12

393

js页面数据操作步骤 1.定义page 和页面data里面的goods 2.瀑布流事件 3.判断是否最大页面并触发提示事件 4.定义一个传到后台的对象 5.成功回调函数获取数据 6.拼接现在的数据和以前的数据 7.page++ 9.数据刷新 ...

微信小程序 瀑布流布局 (源码)

05-31

微信小程序 瀑布流布局 (源码)微信小程序 瀑布流布局 (源码)微信小程序 瀑布流布局 (源码)微信小程序 瀑布流布局 (源码)微信小程序 瀑布流布局 (源码)微信小程序 瀑布流布局 (源码)微信小程序 瀑布流布局 (源码)微信...

微信小程序源码瀑布流布局(学习版)

06-18

微信小程序源码瀑布流布局(学习版)微信小程序源码瀑布流布局(学习版)微信小程序源码瀑布流布局(学习版)微信小程序源码瀑布流布局(学习版)微信小程序源码瀑布流布局(学习版)微信小程序源码瀑布流布局(学习版)...

精选资源

微信小程序图片瀑布流布局demo

05-06

微信小程序是一种轻量级的应用开发平台，由腾讯公司推出，主要应用于移动端，为用户提供便捷的...这个“微信小程序瀑布流布局demo”提供了一个实践这些概念的实例，对于学习和理解微信小程序的开发具有很高的参考价值。

精选资源

微信小程序瀑布流组件

01-27

微信小程序瀑布流组件用法第一步：下载waterfall-layout组件源码到项目目录下；第二步：在json文件中引入waterfall-layout组件； { "navigationBarTitleText": "瀑布流组件", "usingComponents": { "waterfall...

精选资源

微信小程序——瀑布流布局（截图+源码）.zip

04-17

微信小程序——瀑布流布局（截图+源码）.zip 微信小程序——瀑布流布局（截图+源码）.zip 微信小程序——瀑布流布局（截图+源码）.zip 微信小程序——瀑布流布局（截图+源码）.zip 微信小程序——瀑布流布局（截图+...

微信小程序-微信小程序－瀑布流布局

08-06

微信小程序－瀑布流布局说明：实现瀑布流布局和无限下拉加载功能。数据接口: https://api.getweapp.com/vendor/tngou/tnfs/api/list 目录结构： pages — 存放项目页面文件开发环境：微信web开发者工具 v0.11.112301 项目截图： https://www.getweapp.com/project?projectId=583a6886e8ff074c22472f2f

微信小程序实现瀑布流展示

qq_48937065的博客

05-10

2172

在现代互联网时代，瀑布流展示方式越来越受到人们的青睐，其可以将海量的图片、商品等展示在界面上，不同大小的内容通过某种规律美观、有序地布局在网页或应用程序上，极大地提升了内容的呈现方式和用户体验。微信小程序在展示图片和商品等方面也可以采用瀑布流布局，让小程序的内容看起来更加美观、实用。然而，小程序内置的组件并不支持瀑布流展示，需要我们自己动手来实现。本文将带您一步步实现微信小程序瀑布流展示效果，让您的小程序更加出色。

小程序瀑布流

weixin_43090018的博客

02-23

790

先看一下效果，gif图片不知道怎么回事，太大了，上传不了注释写的很详细就不解释了本想做成单个页面的，但是考虑到以后的复用性还是做成组件吧 waterFallFlow组件wxml代码  <view class="waterfallflow-main-container">  <view class="fallflow-left-

小程序实现瀑布流效果

荔枝吖阿

06-21

2424

思路：宽度固定，高度自适应，分为左右两部分，根据当前的数据数来判断，如果index的值等于0，数据添加到左侧列表中，若等于index等于1添加到右侧列表中效果如下: 代码 wxml  <view class="xg_all"> <view class="xg_content"> <view...

小程序瀑布流mp-waterfall

行走天下

06-12

1074

微信小程序瀑布流组件mp-waterfall，实现瀑布流布局。

微信小程序瀑布流

thingir的博客

12-08

1714

需求：两列瀑布流。其中的卡片中内容有图片、文字内容、投票，这三项中并非共存的，有投票优先显示投票、其次有图显示图，没有显示文字。有图片，就会涉及图片高度计算的问题。思路：分左右两个数组。遍历全部的数组，将其放入左右两个数组高度之和小的那一侧。难点：由于图片宽固定，高度加载后重新计算(加载后没等重新计算图片高度，就已经遍历推入左侧或右侧了)，导致左右高度之和计算不准确。难点解决：使用 async/await 等待图片加载完计算高度后，再推入左侧或右侧一、微信小程序代码代码主体.

微信小程序瀑布流布局实现案例解析

总的来说，微信小程序的瀑布流布局案例是一个非常实用的案例，它不仅展示了如何实现瀑布流布局，也展示了微信小程序开发的一些基本技巧和方法。这个案例对于初学者来说，是一个非常好的学习素材。