uniapp VUE纯CSS实现高度不相等的瀑布流

15 篇文章 0 订阅
6 篇文章 0 订阅
本文介绍了一种使用CSS`column-count`和`break-inside`属性实现的两栏内容布局,同时关注了响应式图片模式和视图类的样式设置。
摘要由CSDN通过智能技术生成

在这里插入图片描述

column-count: 2; 数字为2,代表一行显示几个

break-inside: avoid; 去空白,避免换行

<view class="content">
	<view class="list" v-for="(value,index) in 5" :key='index'>
		<image mode="widthFix" src="static/1.png"></image>
		<view class="title">我是标题</view>
		<view class="con">我是内容</view>
	</view>
</view>


.content{
		padding: 30rpx;
		box-sizing: border-box;
		column-count: 2;
		.list {
			break-inside: avoid;
			width: 330rpx;
			border: 1px solid #f4f4f4;
			image {
				width: 100%;
				border-radius: 6rpx;
			}
		
			.title {
				margin-left: 15rpx;
				margin-right: 15rpx;
				font-size: 30rpx;
			}
            .con{
                margin: 15rpx;
				margin-top: 20rpx;
				display: flex;
				font-size: 26rpx;
				align-items: center;
				justify-content: space-between;
            }
       }
}

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Vue3中实现纵向瀑布流布局,也可以使用计算高度的方法。具体步骤如下: 1. 在组件的 `onLoad` 生命周期中获取屏幕宽度,计算每个 item 的宽度; 2. 在数据加载完成后,遍历数据并计算每个 item 的高度,可以使用 `uni.getImageInfo` 方法获取图片信息,进而计算图片的高度; 3. 将每个 item 的高度保存到数据中,并根据列数进行分组,每一组的高度即为该组中所有 item 的高度之和; 4. 在模板中使用 `v-for` 遍历每一组,设置 `display: flex` 和 `flex-direction: column`,实现纵向瀑布流布局; 5. 使用 `style` 绑定每个 item 的高度和宽度,以及 `margin` 或 `padding` 等样式,实现美观的布局效果。 下面是一个简单的示例代码: ```html <template> <div class="container"> <div class="item" v-for="(group, index) in groupList" :key="index" :style="'height: ' + group.height + 'px; width: ' + itemWidth + 'px'" > <img class="img" :src="item.image" :style="'height: ' + item.height + 'px'" mode="aspectFill" /> </div> </div> </template> <script> import { ref, onMounted } from 'vue'; export default { setup() { const dataList = [ { image: 'url1' }, { image: 'url2' }, { image: 'url3' }, // ... ]; const columnCount = 2; const itemWidth = ref(0); const groupList = ref([]); const onLoad = () => { const { windowWidth } = uni.getSystemInfoSync(); itemWidth.value = windowWidth / columnCount; }; const calculateHeight = () => { const tempDataList = [...dataList]; const tempGroupList = Array.from({ length: columnCount }, () => ({ height: 0, items: [] })); while (tempDataList.length) { const minGroupIndex = tempGroupList.reduce((pre, cur, index) => { if (cur.height < tempGroupList[pre].height) { return index; } return pre; }, 0); const item = tempDataList.shift(); const { width } = uni.getImageInfoSync({ src: item.image }); const height = width * 300 / 200; item.height = height; tempGroupList[minGroupIndex].height += height; tempGroupList[minGroupIndex].items.push(item); } groupList.value = tempGroupList; }; onMounted(() => { calculateHeight(); }); return { itemWidth, groupList, onLoad }; } }; </script> <style> .container { display: flex; flex-wrap: wrap; } .item { margin: 10px; background-color: #eee; overflow: hidden; display: flex; flex-direction: column; } .img { width: 100%; } </style> ``` 需要注意的是,在Vue3中,我们使用了 `ref` 和 `setup` 方法来实现组件逻辑。同时,由于 `uni.getImageInfo` 方法是异步的,所以我们需要在 `onMounted` 生命周期中调用 `calculateHeight` 方法来确保数据加载完成后再计算高度
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

初遇你时动了情

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

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

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

打赏作者

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

抵扣说明:

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

余额充值