前言：

由于使用uniapp开发的微信小程序不需要考虑响应式，因此瀑布流的实现相对于pc端更为简单。

思路：

创建宽度一致左右两个盒子用于展示图片流，用过判断两个盒子的高度大小来决定下一张图片插入到哪个盒子中去。

代码：

<!-- html -->
<template><view class="container"><view class="left"><image v-for="(item,index) in leftList" :key="index" :src="item.src" alt="" mode="widthFix"></image></view><view class="right"><image v-for="(item,index) in rightList" :key="index" :src="item.src" alt="" mode="widthFix"></image></view></view>
</template>

export default {data() {return {// 图片列表list: [{src:"/static/01.JPG"},{src:"/static/12.JPG"},{src:"/static/03.JPG"},{src:"/static/04.JPG"},{src:"/static/05.PNG"},{src:"/static/06.PNG"},{src:"/static/08.JPG"},{src:"/static/09.JPG"},{src:"/static/10.jpg"},{src:"/static/11.jpg"},{src:"/static/02.JPG"},{src:"/static/13.JPG"}],// 初始化左右盒子leftList: [],rightList: [],// 初始化左右盒子高度leftH: 0,rightH: 0}},onLoad() {this.doList()},methods: {doList() {const that = thisthis.list.forEach(res => {// 获取图片宽高uni.getImageInfo({src: res.src,success: (image) => {console.log(res.src)// 计算图片渲染高度let showH = (50 * image.height) / image.width// 判断左右盒子高度if(that.leftH <= that.rightH) {that.leftList.push(res)that.leftH += showH} else {that.rightList.push(res)that.rightH += showH}}})})}}}

.container {padding: 0 30rpx;font-size: 14rpx;line-height: 24rpx;}.right,.left{display: inline-block; width: 49%;vertical-align: top;}.left{margin-right: 2%;}.left image,.right image{width: 100%;margin-bottom: 10rpx;}

效果：

uniapp实现简单图片瀑布流相关推荐

微信小程序简单实现图片瀑布流
简单实现图片瀑布流 <view class="container"><view class="box" wx:for='{{show}}' w ...
利用JS实现简单的瀑布流效果
转载:https://www.cnblogs.com/dyx-wx/p/4642637.html 一.瀑布流之准备工作首先声明下, 为了方便演示和联系, 我使用的是本地图片, 如果大家有需要的话 ...
瀑布流式页面布局_微信小程序——实现简单的瀑布流式布局
写页面时,考虑到美观,良好的用户体验,对于内容的展示我们经常会用到瀑布流式布局,那么如何实现一个简单的瀑布流呢? 瀑布流式布局原理:遍历数组判断奇偶性,然后分左右排布,左右两边代码基本一致直接上代 ...
React单页面图片瀑布流——Macy.js
图片瀑布流需求:一个数组里的图片按两列排列,图片尺寸不一样. 问题:如果只是简单的数组分成两个数组,有可能一组图片高度加起来远远高于另一组,视觉效果太差. 想了想简单的js实现逻辑: 1.一个图片数 ...
Android RecyclerView实现图片瀑布流
1.图片瀑布流现在几乎基本上是app比较常见的图片展示方式,此文简单介绍下RecyclerView + Glide结合实现图片瀑布流的效果的实现方法之一,先上效果: 2.具体实现如下: // 1.设置 ...
Android初学二之仿微信APP实现RecyclerView控件的设计开发，实现点击事件及图片瀑布流
目录 0 实验环境 1 界面展示 2 功能说明 3 核心代码 3.1 实现RecyclerView控件的设计开发 3.2 添加了文字库assets 3.3 实现点击事件对item中的每个LinearL ...
图片瀑布流加载和购物车
图片瀑布流加载注释中为详细注释动态添加元素 // 创建图片数组方便后续添加图片路径时使用var img = ["1.jpg", "2.jpg", " ...
Vue原生图片瀑布流
图片瀑布流可以节省图片的排版空间,美观图片的排列,避免图片排列的参差不齐. 实现图片瀑布流可以固定宽(花瓣),也可以固定高(百度图片),看个人需求,我的需求是宽固定. 如果图片的排列不适用瀑布流的话, ...
jaliswall.js图片瀑布流插件
下载地址 jaliswall.js图片瀑布流插件,jQuery响应式瀑布流布插件jaliswall dd:

uniapp实现简单图片瀑布流

前言：

思路：

代码：

效果：

uniapp实现简单图片瀑布流相关推荐

最新文章

热门文章