微信小程序通过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 相关文章推荐
JSQL 基于客户端的成绩统计实现方法
May 05 Javascript
JavaScript去掉数组中的重复元素
Jan 13 Javascript
基于jQuery的让非HTML5浏览器支持placeholder属性的代码
May 24 Javascript
ECMAScript5(ES5)中bind方法使用小结
May 07 Javascript
jQuery+CSS3实现四种应用广泛的导航条制作实例详解
Sep 17 Javascript
最通俗易懂的javascript变量提升详解
Aug 05 Javascript
浅谈react-router HashRouter和BrowserRouter的使用
Dec 29 Javascript
javascript高仿热血传奇游戏实现代码
Feb 22 Javascript
mpvue小程序循环动画开启暂停的实现方法
May 15 Javascript
vue prop属性传值与传引用示例
Nov 13 Javascript
webpack常用构建优化策略小结
Nov 21 Javascript
JavaScript原始值与包装对象的详细介绍
May 11 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中判断一个请求是ajax请求还是普通请求的方法
2011/06/28 PHP
php实现分页工具类分享
2014/01/09 PHP
php rsa加密解密使用详解
2015/01/14 PHP
解析JavaScript中的不可见数据类型
2013/12/02 Javascript
jQuery对象的selector属性用法实例
2014/12/27 Javascript
jQuery仅用3行代码实现的显示与隐藏功能完整实例
2015/10/08 Javascript
整理Javascript数组学习笔记
2015/11/29 Javascript
深入浅析JavaScript中的constructor
2016/04/19 Javascript
Vue中fragment.js使用方法详解
2017/03/09 Javascript
vue中mint-ui环境搭建详细介绍
2017/04/06 Javascript
jQuery中map函数的两种方式
2017/04/07 jQuery
Express系列之multer上传的使用
2017/10/27 Javascript
一步步教你利用webpack如何搭一个vue脚手架(超详细讲解和注释)
2018/01/08 Javascript
Vue框架之goods组件开发详解
2018/01/25 Javascript
mpvue 单文件页面配置详解
2018/12/02 Javascript
微信小程序实现两个页面传值的方法分析
2018/12/11 Javascript
js取0-9随机取4个数不重复的数字代码实例
2019/03/27 Javascript
使用Vue 自定义文件选择器组件的实例代码
2020/03/04 Javascript
js实现tab栏切换效果
2020/08/02 Javascript
JavaScript实现移动端拖动元素
2020/11/24 Javascript
实例解析Python设计模式编程之桥接模式的运用
2016/03/02 Python
python 排序算法总结及实例详解
2016/09/28 Python
python如何爬取动态网站
2020/09/09 Python
python excel多行合并的方法
2020/12/09 Python
Canvas制作旋转的太极的示例
2018/03/09 HTML / CSS
用canvas画心电图的示例代码
2018/09/10 HTML / CSS
捷克家居装饰及图书音像购物网站:Velký košík
2018/04/16 全球购物
美国Curacao百货连锁店网站:iCuracao.com
2019/07/20 全球购物
法国在线药房:Shop Pharmacie
2019/11/26 全球购物
函授本科自我鉴定
2013/11/03 职场文书
好的自荐信包括什么内容
2013/11/07 职场文书
大学生旷课检讨书
2014/01/22 职场文书
优秀少先队工作者事迹材料
2014/05/13 职场文书
党风廉政建设心得体会
2019/05/21 职场文书
Java基于Dijkstra算法实现校园导游程序
2022/03/17 Java/Android
如何设置多台电脑共享打印机?多台电脑共享打印机的方法
2022/04/08 数码科技