uniapp实现瀑布流

来之梦

已于 2024-03-19 01:04:20 修改

阅读量884

点赞数 10

CC 4.0 BY-SA版权

文章标签： uni-app 前端 javascript

于 2024-03-19 01:03:38 首次发布

本文链接：https://blog.csdn.net/qq_41733851/article/details/136826574

该篇文章介绍了使用Vue.js开发的一个应用，通过JavaScript的uni.getImageInfo方法获取图片尺寸信息，实现左右布局的图片列表，根据图片宽高比自适应调整布局，确保在不同设备上具有良好的响应性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
	<view class="container">
		<view class="left" ref="leftColumn">
			<view class="posive" v-for="(item, index) in leftList" :key="index">
				<image :src="item.src" alt="" mode="widthFix" @click="previewImg(item)" />
			</view>
		</view>
		<view class="right" ref="rightColumn">
			<view class="posive" v-for="(item, index) in rightList" :key="index">
				<image :src="item.src" alt="" mode="widthFix" @click="previewImg(item)" />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 图片列表
				list: [{
						src: "https://inews.gtimg.com/om_bt/OjPq2cnMN_-ivDKjxpCZ2kk_ab8YC5VMnL-0pQ21fUvd4AA/1000"
					},
					{
						src: "https://inews.gtimg.com/om_bt/OjPq2cnMN_-ivDKjxpCZ2kk_ab8YC5VMnL-0pQ21fUvd4AA/1000"
					},
					{
						src: "https://inews.gtimg.com/om_bt/OjPq2cnMN_-ivDKjxpCZ2kk_ab8YC5VMnL-0pQ21fUvd4AA/