小程序瀑布流 column-count

最新推荐文章于 2025-10-18 19:47:55 发布

原创最新推荐文章于 2025-10-18 19:47:55 发布 · 2.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#瀑布流

小程序专栏收录该内容

39 篇文章

订阅专栏

</div>

.column2{

column-count: 2; // 设置显示2列

column-gap: 10rpx; //设置或检索对象的列与列之间的间隙为2px

width: 100%;

}

.item{

background: #fff;

width: 370rpx;

display: inline-block; /*内部卡片需要设置为inline-block,否则会截断显示，如图一*/

justify-content: center;

flex-direction: column;

align-items: center;

}

</style>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

个人看法

关注关注

2
点赞
踩
1

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

微信小程序开发中瀑布流布局和图片懒加载

吃不胖.

03-08

518

至此，我们已经完成了微信小程序中瀑布流布局和图片懒加载的实现。图片懒加载通过IntersectionObserver API实现只加载可见区域内的图片，提高页面加载速度和性能。一、瀑布流布局实现瀑布流布局是指在页面中以多列的方式排列元素，每一列的高度自适应，不同列的高度可以不一样。二、图片懒加载实现图片懒加载是指在页面滚动时，只加载可见区域内的图片，提高页面加载速度和性能。微信小程序开发中，瀑布流布局和图片懒加载是比较常用的功能。下面，我将分别介绍瀑布流布局和图片懒加载的实现，并给出相应的代码案例。

瀑布流布局：CSS3多列属性column实现

qq_40868156的博客

03-17

1581

使用CSS3多列属性所踩得坑多列属性会将容器平分成对应设置列数如图：column-count: 2，会将容器分成两列。需要注意：每列之间会有个默认间距，大概是16px，间隔如图红线所处的空白空间。这个空白空间即列之间间隔可以通过column-gap属性调整，若设为0，列之间也就没有间隔啦. 列宽column-width属性不生效问题在实现瀑布流的父容器.waterfall（最下面附有代码图）中直接设置column-width:100px;属性未生效，每列的内容都会撑满列宽（因为用的是块元素），如

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

小程序瀑布流布局（通用方法）

TP19981017的博客

03-18

1242

小程序完美实现类花瓣网小红书瀑布流布局问题做毕业设计需要用到瀑布流布局，看了网上的方法主要有以下两种，但基本都存在问题。 1、使用纯css样式排列出瀑布流布局核心代码：父元素：column-count: 2 子元素：break-inside: avoid 局限：只能一次性展示全部数据，不能做动态数据加载，数据显示位置会随数据加载而错位。 2、分成左右两列根据单条数据索引的奇偶排列出瀑布流布局核心代码： wx-if="{{index%2==0}}" 局限：当奇数列的元素高度大于或小于偶数列

分析 CSS 多列布局 column-count 与 overflow 的交互机制

最新发布

weixin_41455464的博客

10-18

768

多列布局是一种强大的布局方式，但overflow属性与其交互时会带来一些挑战。通过理解overflow的行为，并结合嵌套容器、height属性、属性以及 JavaScript 的辅助，我们可以有效地控制多列布局中的溢出，并创建出更加灵活和稳定的布局。记住，根据具体的需求选择合适的解决方案，并进行充分的测试，才能确保布局在各种情况下都能正常工作。

关于column-count多列布局出现“列中间有白缝”和“一个内容被切割在两列显示”的解决方法

鸭绒的博客

09-17

2618

1.中间有白缝现象：我在项目中使用column-count:2，进行瀑布流布局，然后误认为每列的宽度为屏幕的一半，经反复测试发现使用多列布局会有默认的column-gap:30px(值不够准确，但肯定有默认值)的列间隔，这就导致出现白缝：只要在设置column-count的容器中，使用： -webkit-column-gap: 0px; 这时每列的宽度才是屏幕的一半。 2.内容在两列显示：为什么会出现这样的原因？应该是它的计算原理：将所有容器的高度求和，然后再除以列数，得出每列显示的内容高度。

微信小程序界面设计小程序中CSS3样式精通课程-多列-column-span 跨越多少列

杭州.黄老师

04-09

681

多列-column-span 跨越多少列通用语法定义和用法 column-span 属性规定元素应横跨多少列。默认值： 1 继承性： no 版本： CSS3 JavaScript 语法： object.style.columnSpan=“all” 语法 column-span: 1|all; 值描述 1 元素应横跨一列。 all 元素应横跨所有列。实例使 h2 元素横跨所有列： &lt...

【CSS3】多列布局——column-count

O(∩_∩)O

02-25

1989

column-count属性主要用来给元素指定想要的列数和允许的最大列数。其语法规则： column-count：auto | 取值说明：属性值属性值说明 auto 此值为column-count的默认值，表示元素只有一列，其主要依靠浏览器计算自动设置。此值为正整数

微信小程序通过js实现瀑布流布局详解

12-08

瀑布流布局，也称为Masonry布局，是一种常用于图片或数据列表展示的布局方式，尤其在微信小程序中，由于内容高度可能不一致，因此这种布局能够有效地利用空间，避免空白区域的产生。本文将详细讲解如何通过...

精选资源

微信小程序瀑布流最好最简单的解决方案

03-29

网上能搜到的小程序瀑布流解决方案，要么代码复杂、逻辑混乱，要么实现不了业务功能，所以把我在项目中的实现方案给大家分享下。最简单的实现方案，不适用有分页的场景。这个方案简单的原因是因为仅仅使用了css的...

WxMasonry-微信小程序瀑布流布局模式.zip

11-30

WxMasonry-微信小程序瀑布流布局模式砌体WxMasonry-微信小程序瀑布流布局模式来源微信小程序开发论坛垂直微信小程序开发交流论坛效果github地址WxMasonry-微信小程序实现瀑布流布局 ...以免你们不看到最后在微信小程序...

小程序之图片瀑布流（最全实现方式，额外加送懒加载）

weixin_34279184的博客

05-11

1336

效果图来来来，看啊看，外面的世界多好看，效果图展示的是瀑布流布局 && 懒加载的效果数据图片数据来源张鑫旭的网络日志先说下我们的图片链接格式所有的链接都是http://cued.xunlei.com/demos/publ/img/P_${name}.jpg这样的格式，我们需要改变name的值就行了，当name值小于10的时候，格式是00x,如002、003，大于10的...

css colum 列设置

jasonjkj的博客

09-18

763

head> meta charset="UTF-8"> title>Titletitle> style> /* 1.column-count:整数; 列数 -webkit-column-count:3; -moz-column-count:3; 2.column-gap:

多列布局——column-count

10-17

4079

column-count 瀑布流翻车记

SuperJane_123的博客

03-21

688

column-count 确实是一个简单高效的瀑布流实现方式，但它并非没有缺点。元素拆分和 iOS 兼容性问题都需要额外的处理。希望这篇文章能帮到遇到类似问题的开发者，让大家少走点弯路。如果有其他更好的方案，欢迎在评论区交流！

css3 多列属性 column-count column-gap column-rule

qq_39579242的博客

07-17

1916

1、分隔列把一段文本拆分成几列 column-count:规定元素被分隔的列数 2、列间隔设置列与列之间的距离 column-gap:间隔; 3、列规则可以在列与列之间设置一条间隔线，列规则可以设置间隔线的样式、颜色、粗细 column-rule:大小样式颜色; column-rule-wi...

在HTML5中，要把一篇文章分成多列显示，你可以使用CSS的column-count、column-width、column-gap和column-rule等属性

BLOG域名:programb.blog.youkuaiyun.com

07-03

1330

如果容器宽度不足以按照指定的column-width显示所有列，则实际显示的列数可能会少于column-count设置的值。在HTML5中，要把一篇文章分成多列显示，你可以使用CSS的column-count、column-width、column-gap和column-rule等属性。column-gap设置了列与列之间的间距，而column-rule则添加了一个细微的分隔线来区分各列。column-gap属性用于设置列与列之间的间距，而column-rule属性则用于设置列之间的分隔线。

CSS3新特性详解(五)：多列columns column-count和flex布局

热门推荐

chuangxin的专栏

07-15

1万+

简单来说Html Dom元素就2类：行内元素和块级元素，前者在行内显示（span等），后者换行显示（div等）。所谓布局，比如早期的4大布局：块布局、行内布局、表格布局、定位布局，多半解决的是块级元素行内显示问题，从早期的table布局，到后来的div+css布局，再到后来的多列布局、flex布局等。本文详细讲解了table-cell的使用，及多列布局columns、column-count和flex布局的详细使用说明。

CSS3多列column-count属性

qq_26167153的博客

11-04

980

css3多列属性，column-count 属性规定元素应该被划分的列数，更好的布局多列风格样式。

十天精通CSS3(10)

weixin_34007879的博客

03-08

291

多列布局——Columns 为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）。它主要应用在文本的多列布局方面，这种布局在报纸和杂志上都使用了几十年了，但要在Web页面上实现这样的效果还是有相当大的难度，庆幸的是，CSS3的多列布局可以轻松实现。接下来咱们一起学习多列布局相关的知...

uniapp column-count 动态数据渲染

07-08

<think>我们参考用户提供的引用内容，结合用户的问题“在uniapp中实现column-count动态数据渲染”，来给出解决方案。用户引用[1]中提到了一个瀑布流的实现，其中使用了多列数据（columnData）来分别存储每一列的数据，并通过计算每列高度来实现瀑布流布局。但用户本次需求是使用CSS3的column-count属性来实现动态数据渲染，这与瀑布流（通过JS计算位置）不同，column-count是CSS多列布局，可以自动将内容分成多列。注意：column-count属性在H5和部分小程序平台支持良好，但在某些低版本浏览器或小程序平台可能存在兼容性问题。因此，我们需要考虑动态设置列数，并处理可能出现的兼容性问题。根据用户需求，我们分步骤实现： 1. 在data中定义动态列数（columnCount）和要渲染的数据列表（list）。 2. 在模板中使用动态样式绑定column-count，同时注意添加浏览器前缀（-webkit-column-count）以增强兼容性。 3. 为了防止内容被分列截断，我们可以为每个子项设置`break-inside: avoid`。 4. 实现上拉加载更多数据（类似引用[2]中的方法），通过监听scrolltolower事件来加载更多数据，并追加到list中。具体实现如下：步骤1：定义数据 ```javascript data() { return { columnCount: 3, // 动态列数，可修改 list: [], // 数据列表 page: 1, // 当前页码 hasMore: true // 是否还有更多数据 } } ``` 步骤2：模板部分 ```html <template> <view>  <scroll-view scroll-y="true" style="height: 100vh;" @scrolltolower="loadMore"> <view :style="{'column-count': columnCount, '-webkit-column-count': columnCount, 'column-gap': '10px'}"> <view v-for="(item, index) in list" :key="index" style="break-inside: avoid; margin-bottom: 10px;">  <view class="item"> {{ item.content }} </view> </view> </view>  <view v-if="!hasMore">没有更多了</view> </scroll-view> </view> </template> ``` 步骤3：加载数据方法在methods中定义加载数据的方法，并在mounted中调用初始化，同时监听滚动到底部事件。 ```javascript methods: { async loadData() { if (!this.hasMore) return; // 模拟请求数据 const pageSize = 10; // 每页数量 uni.showLoading({ title: '加载中...' }); try { // 实际项目中替换为你的接口请求 const res = await this.$http.get('/api/list', { page: this.page, pageSize }); if (res.data.length < pageSize) { this.hasMore = false; } this.list = this.list.concat(res.data); this.page++; } catch (e) { console.error(e); } finally { uni.hideLoading(); } }, loadMore() { this.loadData(); } }, mounted() { this.loadData(); } ``` 步骤4：样式调整在style中定义item的样式，注意设置`break-inside: avoid`是为了避免一个项目被分割成两列。注意事项： 1. 兼容性：在微信小程序中，column-count支持良好。但在低版本安卓浏览器中，可能需要添加-webkit-前缀。UniApp在编译到H5时会处理部分兼容性，但小程序端需要看小程序本身的支持情况。 2. 性能：当数据量很大时，column-count布局可能会引起渲染性能问题，因为浏览器需要计算分列。如果遇到性能问题，可以考虑使用瀑布流（通过JS计算位置）代替，如引用[1]中的方法。如果用户需要动态改变列数（比如根据屏幕宽度），可以在onLoad或onResize中动态设置columnCount： ```javascript onLoad() { this.updateColumnCount(); // 监听窗口变化 uni.onWindowResize(() => { this.updateColumnCount(); }); }, methods: { updateColumnCount() { const screenWidth = uni.getSystemInfoSync().screenWidth; if (screenWidth > 600) { this.columnCount = 3; } else if (screenWidth > 400) { this.columnCount = 2; } else { this.columnCount = 1; } }, // ...其他方法 } ``` 通过以上步骤，我们实现了动态列数的多列布局，并支持上拉加载更多数据。相关问题： 1. 如何动态改变column-count的列数？ 2. 在哪些平台column-count可能不兼容？ 3. 如何优化column-count在大数据量下的性能？ 4. 除了column-count，还有哪些多列布局的实现方式？</think>在 UniApp 中实现动态数据的 `column-count` 渲染，需要结合 Vue 的数据响应式特性和 CSS 多列布局。以下是完整实现方案： ### 完整实现方案 ```vue <template>  <view :style="{ 'column-count': columnCount, '-webkit-column-count': columnCount, // 兼容 WebKit 内核 'column-gap': '20rpx' }" class="multi-column" >  <view v-for="(item, index) in dynamicData" :key="index" class="column-item" > <image :src="item.image" mode="aspectFill" /> <text>{{ item.title }}</text> </view> </view>  <view class="controls"> <button @click="setColumnCount(2)">2列</button> <button @click="setColumnCount(3)">3列</button> <button @click="setColumnCount(4)">4列</button> </view>  <view v-if="loading" class="loading">加载中...</view> <view v-else-if="hasMore" @click="loadMoreData">加载更多</view> </template> <script> export default { data() { return { columnCount: 3, // 默认3列 dynamicData: [], // 动态数据 page: 1, pageSize: 15, hasMore: true, loading: false } }, mounted() { this.initData() this.setResponsiveColumns() // 监听屏幕变化 uni.onWindowResize(() => this.setResponsiveColumns()) }, methods: { // 初始化数据 async initData() { this.loading = true const newData = await this.fetchData(this.page) this.dynamicData = [...newData] this.loading = false }, // 加载更多数据 async loadMoreData() { if (!this.hasMore) return this.loading = true this.page++ const newData = await this.fetchData(this.page) this.dynamicData = [...this.dynamicData, ...newData] this.hasMore = newData.length >= this.pageSize this.loading = false }, // 模拟数据获取 fetchData(page) { return new Promise(resolve => { setTimeout(() => { const data = Array.from({ length: this.pageSize }, (_, i) => ({ id: `${page}-${i}`, title: `项目 ${page}-${i}`, image: `/static/images/${Math.floor(Math.random() * 10) + 1}.jpg` })) resolve(data) }, 800) }) }, // 设置列数 setColumnCount(count) { this.columnCount = count }, // 响应式列数设置 setResponsiveColumns() { const { windowWidth } = uni.getSystemInfoSync() if (windowWidth > 700) this.columnCount = 4 else if (windowWidth > 500) this.columnCount = 3 else this.columnCount = 2 } } } </script> <style> .multi-column { padding: 20rpx; column-gap: 20rpx; /* 列间距 */ } .column-item { break-inside: avoid; /* 防止内容分割 */ margin-bottom: 20rpx; background: #fff; border-radius: 12rpx; overflow: hidden; box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05); } .column-item image { width: 100%; height: 200rpx; } .column-item text { display: block; padding: 16rpx; font-size: 28rpx; } .controls { position: fixed; bottom: 40rpx; left: 0; right: 0; display: flex; justify-content: center; gap: 20rpx; } .loading { text-align: center; padding: 30rpx; color: #888; } </style> ``` ### 关键实现细节 1. **动态列数控制** - 通过 Vue 的响应式数据 `columnCount` 控制列数 - 使用 `:style` 动态绑定到 CSS 属性 ```vue :style="{ 'column-count': columnCount, '-webkit-column-count': columnCount }" ``` 2. **数据加载机制** - 分页加载数据（`page` 和 `pageSize` 控制） - 滚动到底部自动加载（可结合 `scroll-view` 的 `@scrolltolower`） ```javascript async loadMoreData() { if (!this.hasMore) return // 获取新数据并合并 } ``` 3. **响应式布局优化** - 根据屏幕宽度自动调整列数 ```javascript setResponsiveColumns() { const { windowWidth } = uni.getSystemInfoSync() if (windowWidth > 700) this.columnCount = 4 else if (windowWidth > 500) this.columnCount = 3 else this.columnCount = 2 } ``` 4. **防止内容截断** ```css .column-item { break-inside: avoid; /* 关键属性 */ } ``` ### 平台兼容性处理 | 平台 | 支持情况 | 解决方案 | |------------|-----------------------------------|------------------------------| | H5 | 主流浏览器支持良好 | 添加 `-webkit-` 前缀 | | 微信小程序 | 全版本支持 | 无需特殊处理 | | 支付宝小程序 | 部分低版本不支持 | 降级为单列布局 | | App | iOS/Android 主流机型支持 | 测试目标机型 | ### 性能优化建议 1. **大数据量处理** ```vue <scroll-view scroll-y style="height: 100vh" @scrolltolower="loadMoreData">  </scroll-view> ``` 2. **图片懒加载** ```vue <image :src="item.image" mode="aspectFill" lazy-load /> ``` 3. **虚拟列表技术** 当数据超过 1000 条时，建议使用 `vk-uview-ui` 等组件的虚拟列表： ```vue <vk-uview-ui-virtual-list :data="dynamicData">  </vk-uview-ui-virtual-list> ``` 4. **避免频繁重排** ```javascript // 批量更新数据 this.dynamicData = [...this.dynamicData, ...newData] ``` ### 常见问题解决 1. **内容截断问题** - 确保每个列项有 `break-inside: avoid` - 添加足够的下边距：`margin-bottom: 20rpx` 2. **列高不一致** ```css .multi-column { column-fill: balance; /* 平均分配内容 */ } ``` 3. **滚动卡顿** - 使用 CSS 硬件加速： ```css .multi-column { transform: translateZ(0); } ``` [^1]: 参考 Vue 响应式数据绑定机制 [^2]: 基于微信小程序官方文档对 CSS3 的支持说明