目录

响应瀑布流列数的实例函数

使用 screenSizeGrid 实例

对数据的列数处理

Vue中布局

Nvue中布局

该文章里的组件 Joshua-lazyLoad-cache-image 为uniapp插件：图片懒加载和缓存功能 - DCloud 插件市场

响应瀑布流列数的实例函数

        可以拿取到当前的视图宽度和列数

function screenSizeGrid() {
	let column = 0
	let windowWidth = 0
	const state = {
		getColumn: () => column,
		getWindowWidth: () => windowWidth
	};
	let systemInfo = uni.getSystemInfoSync();
	let screenWidth = systemInfo.screenWidth;
	const windowResizeCallback = (res = {
		size: {}
	}) => {

		windowWidth = res.size.windowWidth || screenWidth;
		if (windowWidth < 539) {
			column = 1
		} else if (windowWidth < 970 && windowWidth > 539) {
			column = 2
		} else if (windowWidth > 970) {
			column = 3
		}

		uni.$emit('windowResizeUpdate');
	}
	windowResizeCallback()
	uni.onWindowResize(windowResizeCallback);
	return {
		...state,
		subscribeToUpdates: (callback) => {
			uni.$on('windowResizeUpdate', callback);
		}
	};
}

使用 screenSizeGrid 实例

import {
		screenSizeGrid
	} from '@/common/oneself.js'

onShow() {
	const screenState = screenSizeGrid();
    screenState.subscribeToUpdates(() => {
	    screenState.getColumn() // 获取列数
        screenState.getWindowWidth() // 获取宽度
    });
}

对数据的列数处理

function dynamicGrouping(data, i) {
	if (i <= 0) return
	const groups = [];
	for (let j = 0; j < i; j++) {
		groups.push([]);
	}
	for (let k = 0; k < data.length; k++) {
		const groupIndex = k % i;
		groups[groupIndex].push(data[k]);
	}
	return groups;
}

Vue中布局

    <view class="gallEry" :style="'grid-template-columns: repeat(' + flowData.column +',1fr);'">
		<view class="gallEryBox" style="gap: 10px;" v-for="(numVal, index) in flowData.column" :key="numVal">
			<view v-for="(item, j) in flowData[`column_${index + 1}`]" :key="item.src.split('/').pop()">
				<Joshua-lazyLoad-cache-image bgColor='rgba(0,0,0,.2)' :duration="1000" :bottomNumber="10"
						:lazyLoad="lazyLoad" :cache="cache" scroll=".content" className="imgBox" :src='item.src'>
				</Joshua-lazyLoad-cache-image>
			</view>
		</view>
    </view>

	import {
		screenSizeGrid,
		dynamicGrouping
	} from '@/common/oneself.js'       
     data() {
			return {
				imageList: [],
				flowData: {
					column: 2,
					columnSpace: 2
				}
			}
		},
        onLoad() {
			for (let i = 1; i <= this.flowData.column; i++) {
				this.flowData[`column_${i}`] = []
			}
			this.getData()
		},
		onShow() {
			this.getColnum()
		},
		methods: {
			getColnum() {
				const screenState = screenSizeGrid();
				screenState.subscribeToUpdates(() => {
					this.flowData.column = screenState.getColumn() + 1
					this.changeColumn()
				});
			},
			changeColumn() {
				let groupList = dynamicGrouping(this.imageList, this.flowData.column);
				groupList.forEach((item, i) => (this.flowData[`column_${i + 1}`] =     item))
			},
	        getData() {
				this.imageList = {
					src: ''
				}
				this.getColnum()
			}
        }

    .gallEry {
		width: 100%;
		display: grid;
		gap: 0 10px;
		padding: 10px;
		box-sizing: border-box;

		.gallEryBox {
			display: flex;
			flex-direction: column;
		}
	}

Nvue中布局

	<view class="gallEry">
		<view :style="'width:' + imgW  + 'px'" class="gallEryBox" v-for="(numVal, index) in flowData.column"
				:key="numVal">
			<view :style="'width:' + imgW  + 'px'" class="gallEryBox_item"
					v-for="(item, j) in flowData[`column_${index + 1}`]" :key="item.src.split('/').pop()">
				<Joshua-lazyLoad-cache-image bgColor='rgba(0,0,0,.2)' :duration="1000" :bottomNumber="1000"
						:lazyLoad="lazyLoad" :cache="cache" scroll=".content" className="imgBox" :src='item.src'>
				</Joshua-lazyLoad-cache-image>
			</view>
		</view>
	</view>

    import {
		screenSizeGrid,
		dynamicGrouping
	} from '@/common/oneself.js'
		data() {
			return {
				imageList: [],
				flowData: {
					column: 2,
					columnSpace: 2
				},
				pageW: 0
			}
		},
		onLoad() {
			for (let i = 1; i <= this.flowData.column; i++) {
				this.flowData[`column_${i}`] = []
			}
			this.getData()
		},
		onShow() {
			this.getColnum()
		},
		computed: {
			imgW() {
				return ((this.pageW - 20) - ((this.flowData.column - 1) * 10)) / this.flowData.column
			}
		},
		methods: {
			getColnum() {
				const screenState = screenSizeGrid();
				screenState.subscribeToUpdates(() => {
					this.pageW = screenState.getWindowWidth()
					this.flowData.column = screenState.getColumn() + 1
					this.changeColumn()
				});
			},
			changeColumn() {
				let groupList = dynamicGrouping(this.imageList, this.flowData.column);
				groupList.forEach((item, i) => (this.flowData[`column_${i + 1}`] = item))
			},
			getData() {
				this.imageList =[{
					src: url
				}]
				this.getColnum()
			}

		}

	.gallEry {
		display: flex;
		justify-content: space-between;
		padding: 10px;

		.gallEryBox {
			display: flex;
			flex-direction: column;
		}

		.gallEryBox_item {
			margin-top: 10px;
		}
	}