小程序开发之瀑布流布局

在实际开发中，有很多时候会用到瀑布流布局，应用场景最多的可能要属图片展示了。
下面记录一下在小程序中如何实现瀑布流布局。（都是美女小姐姐的图片->_->）
一、图片分列排列计算
我们要实现一个固定排列成两列的布局，将图片动态加载进来，而加载的图片会根据图片的尺寸自动决定排左还是排右。

/* 瀑布流 */
/*单张图片*/
.img_item {width: 48%;margin: 1%;display: inline-block;vertical-align: top;
}

以上是单张图片的样式，接下来是在js中通过代码来计算图片的排列顺序。
首先定义两个变量：col1H、col2H，用来计算排列顺序。

let col1H = 0;
let col2H = 0;

然后，在data中定义一些会用到的变量。

scrollH: 0,imgWidth: 0,//图片宽度loadingCount: 0,//图片总数images: [],//存放图片数据col1: [],//左col2: [],//右

在onload方法中，用下面的代码计算一些变量的值

wx.getSystemInfo({success: (res) => {let ww = res.windowWidth;let wh = res.windowHeight;let imgWidth = ww * 0.48;let scrollH = wh;this.setData({scrollH: scrollH,imgWidth: imgWidth});this.loadImages();}})

最后，通过具体的代码计算出哪些图片放左边，哪些图片放右边。

//通过计算，将图片分成两列onImageLoad: function(e) {let imageId = e.currentTarget.id;let oImgW = e.detail.width; //图片原始宽度let oImgH = e.detail.height; //图片原始高度let imgWidth = this.data.imgWidth; //图片设置的宽度let scale = imgWidth / oImgW //比例计算let imgHeight = oImgH * scale; //自适应高度let images = this.data.images;let imageObj = null;for (let i = 0; i < images.length; i++) {let img = images[i];if (img.id === imageId) {imageObj = img;break;}}imageObj.height = imgHeight;let loadingCount = this.data.loadingCount - 1;let col1 = this.data.col1;let col2 = this.data.col2;if (col1H <= col2H) {col1H += imgHeight;col1.push(imageObj);} else {col2H += imgHeight;col2.push(imageObj);}let data = {loadingCount: loadingCount,col1: col1,col2: col2};if (!loadingCount) {data.images = [];}this.setData(data);},loadImages: function() {let images = [{img:'../../images/1.jpg',height:0},{ img: '../../images/2.jpg', height: 0 },{ img: '../../images/3.jpg', height: 0 },{ img: '../../images/4.jpg', height: 0 },{ img: '../../images/5.jpg', height: 0 },{ img: '../../images/6.jpg', height: 0 }, { img: '../../images/7.jpg', height: 0 },{ img: '../../images/8.jpg', height: 0 },{ img: '../../images/9.jpg', height: 0 },{ img: '../../images/10.jpg', height: 0 },{ img: '../../images/11.jpg', height: 0 },{ img: '../../images/12.jpg', height: 0 },{ img: '../../images/13.jpg', height: 0 },{ img: '../../images/14.jpg', height: 0 }]let baseId = "img-" + (+new Date());for (let i = 0; i < images.length; i++) {images[i].id = baseId + "-" + i;}_this.setData({loadingCount: images.length,images: images,})},

二、布局

<view class="view-fp-container"><!--瀑布流--><view style="display:none"><image wx:for="{{images}}" wx:key="id" id="{{item.id}}" src="{{item.img}}" bindload="onImageLoad"></image></view><scroll-view scroll-y="true" style="height:{{scrollH}}px" bindscrolltolower="scrollLower"><view style="width:100%"><view class="img_item"><view style="background-color:#fff;margin-bottom:10rpx;" wx:for="{{col1}}" wx:key="id"><image src="{{item.img}}" style="width:100%;height:{{item.height}}px" mode='aspectFill'></image></view></view><view class="img_item"><view style="background-color:#fff;margin-bottom:10rpx;" wx:for="{{col2}}" wx:key="id"><image src="{{item.img}}" style="width:100%;height:{{item.height}}px" mode='aspectFill'></image></view></view></view></scroll-view>
</view>

三、样式

page {background-color: #f2f2f2;
}.view-fp-container {display: flex;flex-direction: column;margin: 0 10rpx;
}/* 瀑布流 */.img_item {width: 48%;margin: 1%;display: inline-block;vertical-align: top;
}

四、最终效果

（注：展示效果和图片数量、宽高有关系）

小程序开发之瀑布流布局相关推荐

微信小程序中实现瀑布流布局和无限加载
瀑布流布局是一种比较流行的页面布局方式,最典型的就是Pinterest.com,每个卡片的高度不都一样,形成一种参差不齐的美感. 在HTML5中,我们可以找到很多基于jQuery之类实现的瀑布流布局插 ...
小程序开发需要注意什么
小程序对于现在的生活来说已经是一个特别热门的应用了,没有人不知道小程序的存在,小程序有很多的优势,使用特别方便并且不占内存,所以受很多人的喜欢,那么小程序开发需要注意些什么呢?今天方维网络就给大家分享 ...
微信小程序开发的完整流程介绍，新手必读
自从跳一跳小程序游戏出现后,一夜之间,小程序就变得家喻户晓了,功能开发也越来越丰富,在微信搜一搜就会发现许多大品牌早已有自己的小程序了,越来越多的企业和商家都看中了这个风口,想快速开发出一款属于自己的 ...
01 小程序开发入门
技术交流QQ群:1027579432,欢迎你的加入! 欢迎关注我的微信公众号:CurryCoder的程序人生 1.什么是小程序小程序是一种不需要下载安装即可使用的应用,它实现了应用"触手可 ...
微信小程序开发（2）_data属性
假设我们的环境都做好了,现在我们开始开发自己的小程序首先我们开发出自己的 Hello World 我们要做的事情是当前点击hello World的时候HelloWorld的颜色发生变化: 这个是我们 ...
微信小程序开发之选项卡
选项卡是web开发中经常使用到的一个模块,在小程序中竟然没有,这里参考别人的文章自己做了一个双选项卡实现思路: 通过绑定swichNav事件来控制currentTab(当前选项卡)和isShow(是 ...
微信小程序开发优秀教程及文章合集第一期
2019独角兽企业重金招聘Python工程师标准>>> 我会不定期的选取一些优质教程,整理成辑,以便大家集中阅读: 新手向!微信小程序开发手记系列: 微信小程序开发手记<一&g ...
经验总结--我的小程序开发和进化之路
前言从接触小程序开始,到现在大大小小做了差不多有五六个小程序项目了,小项目的只有几个页面,大的项目有几十个页面.此篇文章是对之前项目的一个总结,项目的脚手架,开发框架和后期的优化是一个逐渐进化完善的 ...
新闻资讯小程序开发实践
新闻资讯小程序开发实践在腾讯小程序上线一周年之际,公司又决定把App产品部分内容在小程序上实现.就在小程序刚上线的时候,公司也有一款产品进行了小程序的研发,但后续没有持续的维护.这过了一年的时间,微 ...

小程序开发之瀑布流布局

小程序开发之瀑布流布局相关推荐

最新文章

热门文章