网上能搜到的小程序瀑布流解决方案，要么代码复杂、逻辑混乱，要么实现不了业务功能，所以把我在项目中的实现方案给大家分享下。
最简单的实现方案，不适用有分页的场景。
这个方案简单的原因是因为仅仅使用了css的属性。
使用column-count 属性可以指定页面显示的列数，一般瀑布流都是2列，所以可以定义class
.list-masonry {
column-count: 2; //2列
column-gap: 20rpx; //列间距
}
界面定义也很简单
<block wx:for="{{goodsList}}" wx:
2022-05-06 13:15:30
78KB
1
微信小程序——瀑布流布局（截图+源码）.zip
微信小程序——瀑布流布局（截图+源码）.zip
微信小程序——瀑布流布局（截图+源码）.zip
微信小程序——瀑布流布局（截图+源码）.zip
微信小程序——瀑布流布局（截图+源码）.zip
微信小程序——瀑布流布局（截图+源码）.zip
微信小程序——瀑布流布局（截图+源码）.zip
微信小程序——瀑布流布局（截图+源码）.zip
微信小程序——瀑布流布局（截图+源码）.zip
微信小程序——瀑布流布局（截图+源码）.zip
微信小程序——瀑布流布局（截图+源码）.zip
2022-04-18 11:05:47
1.57MB
前言
瀑布流布局是一种比较流行的页面布局方式，最典型的就是Pinterest.com，每个卡片的高度不都一样，形成一种参差不齐的美感。
在HTML5中，我们可以找到很多基于jQuery之类实现的瀑布流布局插件，轻松做出这样的布局形式。在微信小程序中，我们也可以做出这样的效果，不过由于小程序框架的一些特性，在实现思路上还是有一些差别的。
今天我们就来看一下如何在小程序中去实现这种瀑布流布局：
小程序瀑布流布局
我们要实现的是一个固定2列的布局，然后将图片数据动态加载进这两列中（而加载进来的图片，会根据图片实际的尺寸，来决定到底是放在左列还是右列中）。
/* 单个图片容器的样式 */
.im
2022-04-06 22:23:43
222KB
1
本文实例讲述了Android开发之瀑布流控件的实现与使用方法。分享给大家供大家参考，具体如下：
public class FlowLayout extends ViewGroup {
/**行里子view之间的行距离*/
public int mHorizontolSpace = Util.getDimen(R.dimen.top_padding);
/**行里子view之间的垂直距离*/
public int mVerticalSpace = Util.getDimen(R.dimen.top_padding);
/**创建行的集合*/
private List<L
2022-03-28 16:17:12
67KB
1
轻虚拟列表
英文||
支持基于Vue的瀑布流的虚拟列表组件库
支撑固定高度
支撑高度可变
支持两列瀑布流布局
支持DOM多屏配置
支持状态选择
支持数据动态附加
支持动态删除数据
使用
安装
npm install lite-virtual-list
使用
import liteVirtualList from "lite-virtual-list"
Vue . use ( liteVirtualList )
{{ item . value }}</ div
2022-03-23 22:45:21
860KB
1
微信小程序－瀑布流布局
说明：
实现瀑布流布局和无限下拉加载功能。
数据接口:
https://api.getweapp.com/vendor/tngou/tnfs/api/list
目录结构：
pages — 存放项目页面文件
开发环境：
微信web开发者工具 v0.11.112301
项目截图：
https://www.getweapp.com/project?projectId=583a6886e8ff074c22472f2f
2022-03-13 19:48:55
3KB
1