微信小程序通过js实现瀑布流布局详解


Posted in Javascript onAugust 28, 2019

前言

瀑布流 - 小程序中数据列表或者图片展示难免高度不一,而我们一般固定宽度,让其高度自适应,并无缝对接。如下图:

微信小程序通过js实现瀑布流布局详解

瀑布流的两种做法:

css:

在父元素上使用column-count: 2也可以做到两列排版。但column-count: 2是左右两列排版,如果碰巧出现左边累计高度过多大于右边累计高度的话,右边会出现大片空白区域。点击前往

js(推荐):

判断左右两边的累计高度,那边的高度小,便往那边添加(需要动态获取节点元素的高度进行计算)。下面用的就是此种方法:

准备工作

我们需要用到 await ,而使用 await 需要在本地配置中开启增强编译。如下图:

微信小程序通过js实现瀑布流布局详解

实现代码

此方法采用左右两列布局,判断两边高度。如果左<右,填充到左边,否则填充到右边
(list不建议一次请求过多数据,过多的数据可能会造成加载慢,可用图片懒加载优化)

test.wxml

<!--pages/test/test.wxml-->
<view class="container">
 <view id="left">
  <view wx:for="{{leftList}}" wx:key>
   <image src="{{item.url}}" mode='widthFix'></image>
   <text>{{item.title}}</text>
  </view>
 </view>
 <view id="right">
  <view wx:for="{{rightList}}" wx:key>
   <image src="{{item.url}}" mode='widthFix'></image>
   <text>{{item.title}}</text>
  </view>
 </view>
</view>

test.wxss

/* pages/test/test.wxss */
#left, #right{
 width: 48%;
 margin: 0 1%;
 float: left;
}
#left image, #right image{
 width: 100%;
}

test.js

//test.js
let leftHeight = 0, rightHeight = 0; //分别定义左右两边的高度
let query;
Page({
 data: {
  list: [{
    title: '1',
    url: 'http://zq.jhcms.cn/attachs/photo/201711/20171130_176CFE51B6710715B1BBBEF2F86ACB0C.jpg',
   }, {
    title: '2',
    url: 'http://img3.imgtn.bdimg.com/it/u=1417732605,3777474040&fm=26&gp=0.jpg',
   },{
    title: '3',
    url: 'http://f10.baidu.com/it/u=121654667,1482133440&fm=72',
   },{
    title: '4',
    url: 'http://img3.imgtn.bdimg.com/it/u=1417732605,3777474040&fm=26&gp=0.jpg',
   },{
    title: '5',
    url: 'http://zq.jhcms.cn/attachs/photo/201711/20171130_9E39DA252E3946BE36218D85876C4AB4.jpg',
   },{
    title: '6',
    url: 'http://img3.imgtn.bdimg.com/it/u=1417732605,3777474040&fm=26&gp=0.jpg',
   },{
    title: '7',
    url: 'http://img3.imgtn.bdimg.com/it/u=1417732605,3777474040&fm=26&gp=0.jpg'
   },{
    title: '8',
    url: 'http://img3.imgtn.bdimg.com/it/u=1417732605,3777474040&fm=26&gp=0.jpg',
   },{
    title: '9',
    url: 'http://f10.baidu.com/it/u=121654667,1482133440&fm=72'
   },{
    title: '7',
    url: 'http://img4.imgtn.bdimg.com/it/u=2748975304,2710656664&fm=26&gp=0.jpg'
   },{
    title: '8',
    url: 'http://img2.imgtn.bdimg.com/it/u=1561660534,130168102&fm=26&gp=0.jpg'
   },{
    title: '9',
    url: 'http://img3.imgtn.bdimg.com/it/u=1417732605,3777474040&fm=26&gp=0.jpg'
   },{
    title: '10',
    url: 'http://zq.jhcms.cn/attachs/photo/201711/20171130_176CFE51B6710715B1BBBEF2F86ACB0C.jpg',
   }],
  leftList: [],
  rightList: []
 },
 onLoad() {
  this.isLeft();
 },
 async isLeft() {
  const { list, leftList, rightList } = this.data;
  query = wx.createSelectorQuery();
  for (const item of list) {
   leftHeight <= rightHeight ? leftList.push(item) : rightList.push(item); //判断两边高度,来觉得添加到那边
   await this.getBoxHeight(leftList, rightList);
  }
 },
 getBoxHeight(leftList, rightList) { //获取左右两边高度
  return new Promise((resolve, reject) => {
   this.setData({ leftList, rightList }, () => {
    query.select('#left').boundingClientRect();
    query.select('#right').boundingClientRect();
    query.exec((res) => {
     leftHeight = res[0].height; //获取左边列表的高度
     rightHeight = res[1].height; //获取右边列表的高度
     resolve();
    });
   });
  })
 }
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
类似GMAIL的Ajax信息反馈显示
Feb 16 Javascript
几个比较经典常用的jQuery小技巧
Mar 01 Javascript
js实现n秒倒计时后才可以点击的效果
Dec 20 Javascript
用JS生成UUID的方法实例
Mar 30 Javascript
Kindeditor在线文本编辑器如何过滤HTML
Apr 14 Javascript
图文详解Javascript中的上下文和作用域
Feb 15 Javascript
微信小程序开发之入门实例教程篇
Mar 07 Javascript
vue 音乐App QQ音乐搜索列表最新接口跨域设置方法
Sep 25 Javascript
通过JS运行机制的角度说说作用域
Mar 12 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
Sep 20 Javascript
vue路由传参的基本实现方式小结【三种方式】
Feb 05 Javascript
vue - props 声明数组和对象操作
Jul 30 Javascript
TypeScript类型声明书写详解
Aug 28 #Javascript
vue服务端渲染操作简单入门实例分析
Aug 28 #Javascript
浅谈对于“不用setInterval,用setTimeout”的理解
Aug 28 #Javascript
Vue的编码技巧与规范使用详解
Aug 28 #Javascript
JS开发自己的类库实例分析
Aug 28 #Javascript
详解Vue 换肤方案验证
Aug 28 #Javascript
Vue项目实现换肤功能的一种方案分析
Aug 28 #Javascript
You might like
php部分常见问题总结
2008/03/27 PHP
PHP获取当前页面URL函数实例
2014/10/22 PHP
php判断当前操作系统类型
2015/10/28 PHP
PHP简单读取xml文件的方法示例
2017/04/20 PHP
Jquery+ajax请求data显示在GridView上(asp.net)
2010/08/27 Javascript
Javacript实现颜色梯度变化和渐变的效果代码
2013/05/31 Javascript
jquery设置text的值示例(设置文本框 DIV 表单值)
2014/01/06 Javascript
用html+css+js实现的一个简单的图片切换特效
2014/05/28 Javascript
用js传递value默认值的示例代码
2014/09/11 Javascript
JavaScript实现模仿桌面窗口的方法
2015/07/18 Javascript
基于AngularJS实现页面滚动到底自动加载数据的功能
2015/10/16 Javascript
jQuery+css实现的时钟效果(兼容各浏览器)
2016/01/27 Javascript
使用JQuery 加载页面时调用JS的实现方法
2016/05/30 Javascript
JavaScript箭头函数_动力节点Java学院整理
2017/06/28 Javascript
利用10行js代码实现上下滚动公告效果
2017/12/08 Javascript
微信小程序实现YDUI的ScrollNav组件
2018/02/02 Javascript
node.js基于socket.io快速实现一个实时通讯应用
2019/04/23 Javascript
javascript面向对象创建对象的方式小结
2019/07/29 Javascript
no-vnc和node.js实现web远程桌面的完整步骤
2019/08/11 Javascript
微信小程序实现滑动操作代码
2020/04/23 Javascript
[03:32]2014DOTA2西雅图邀请赛 CIS外卡赛赛前black专访
2014/07/09 DOTA
在Python的Flask框架中实现单元测试的教程
2015/04/20 Python
python中numpy的矩阵、多维数组的用法
2018/02/05 Python
Python实现的连接mssql数据库操作示例
2018/08/17 Python
Python反射和内置方法重写操作详解
2018/08/27 Python
python之消除前缀重命名的方法
2018/10/21 Python
Python 将Matrix、Dict保存到文件的方法
2018/10/30 Python
对Python中DataFrame选择某列值为XX的行实例详解
2019/01/29 Python
Python将视频或者动态图gif逐帧保存为图片的方法
2019/09/10 Python
python实现将字符串中的数字提取出来然后求和
2020/04/02 Python
Python 调用C++封装的进一步探索交流
2021/03/04 Python
荷兰本土平价百货:HEMA
2017/10/23 全球购物
捷克移动配件网上商店:ProMobily.cz
2019/03/15 全球购物
企业管理部经理岗位职责
2013/12/24 职场文书
学校创先争优活动总结
2014/08/28 职场文书
goland 设置project gopath的操作
2021/05/06 Golang