【我的创作纪念日】uniapp实现瀑布流布局的方法

前言

瀑布流布局也是网页中常见的布局方式，在一些电商项目中总能看到页面中的商品以交错排序的方式展示给用户。

一、使用column-count的方式实现。

主要使用 column-count 属性来规定瀑布流的划分的列数
column-gap 则是控制列之间的间距
以及 column-width 指定列的宽度

<template>
	<view class="content">
		<view style="height: 200rpx;">view>
		<view style="height: 400rpx;">view>
		<view style="height: 500rpx;">view>
		<view style="height: 300rpx;">view>
	view>
template>
<script>
	export default {
		data() {
			return {

			}
		},
		onLoad() {

		},
		onShow() {

		},
		methods: {

		}
	}
script>
<style lang="scss" scoped>
	.content {
		padding: 30rpx;
		column-count: 2; // 规定元素应该被划分的列数
		column-gap: 20rpx; // 列之间的间隔
		font-size: 0rpx;

		view {
			width: 100%;
			display: inline-block;
			margin-bottom: 20rpx;
			background: red;
		}
	}
style>

IOS 以及 微信小程序 效果展示

二、使用display: grid;网格布局

注意！ 此方法在微信小程序中无法使用

使用display: grid;改变为网格布局
grid-template-columns: repeat(2, 1fr); 控制每行展示2列
grid-gap: 20rpx;列间距
grid-template-rows: masonry; 主要代码 表示行以砖块展示

<template>
	<view class="content">
		<view style="height: 200rpx;">view>
		<view style="height: 400rpx;">view>
		<view style="height: 500rpx;">view>
		<view style="height: 500rpx;">view>
	view>
template>
<script>
	export default {
		data() {
			return {

			}
		},
		onLoad() {

		},
		onShow() {

		},
		methods: {

		}
	}
script>
<style lang="scss" scoped>
	.content {
		padding: 30rpx;
		display: grid; // 网格布局
		grid-template-columns: repeat(2, 1fr); // 表示一行显示 2 列
		grid-gap: 20rpx; // 列间距
		grid-template-rows: masonry; // 表示砖块布局 没有具体翻译

		view {
			width: 100%;
			display: block; // 需要将元素设置为 块(block)
			background: red;
		}
	}
style>

效果展示

在微信小程序中不起作用。

三、使用flex布局方式

使用flex布局就没什么好说的了

<template>
	<view class="content">
		<view class="left">
			<view style="height: 300rpx;">view>
			<view style="height: 300rpx;">view>
			<view style="height: 400rpx;">view>
		view>
		<view class="right">
			<view style="height: 400rpx;">view>
			<view style="height: 300rpx;">view>
		view>
	view>
template>
<script>
	export default {
		data() {
			return {

			}
		},
		onLoad() {

		},
		onShow() {

		},
		methods: {

		}
	}
script>
<style lang="scss" scoped>
	.content {
		padding: 30rpx;
		display: flex;
		justify-content: space-between;

		.left,
		.right {
			width: calc(100% - 50% - 10rpx);

			view {
				margin-bottom: 20rpx;
				background: red;
			}
		}

	}
style>

效果展示

如有不对的地方还请大佬指出～