微信小程序通过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 相关文章推荐
基于jquery实现的移入页面上空文本框时,让它变为焦点,移出清除焦点
Jul 26 Javascript
jQuery横向擦除焦点图特效代码分享
Sep 06 Javascript
jQuery实现HTML表格单元格的合并功能
Apr 06 Javascript
Bootstrap在线电子商务网站实战项目5
Oct 14 Javascript
常用原生js自定义函数总结
Nov 20 Javascript
JavaScript之DOM_动力节点Java学院整理
Jul 03 Javascript
Vue中this.$router.push参数获取方法
Feb 27 Javascript
webpack的CSS加载器的使用
Sep 11 Javascript
vue2.0移动端滑动事件vue-touch的实例代码
Nov 27 Javascript
VUE+elementui组件在table-cell单元格中绘制微型echarts图
Apr 20 Javascript
Antd表格滚动 宽度自适应 不换行的实例
Oct 27 Javascript
ElementUI实现el-form表单重置功能按钮
Jul 21 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 正则表达式之正则处理函数小结(preg_match,preg_match_all,preg_replace,preg_split)
2012/10/05 PHP
JS加ASP二级域名转向的代码
2007/05/17 Javascript
JavaScript 对象链式操作测试代码
2010/04/25 Javascript
node在两个div之间移动,用ztree实现
2013/03/06 Javascript
jquery隐藏标签和显示标签的实例
2013/11/11 Javascript
jQuery实现鼠标滑过Div层背景变颜色的方法
2015/02/17 Javascript
详解JavaScript对W3C DOM模版的支持情况
2015/06/16 Javascript
jquery分割字符串的方法
2015/06/24 Javascript
详解支持Angular 2的表格控件
2017/01/19 Javascript
jquery实现的table排序功能示例
2017/03/10 Javascript
AngularJS实现动态添加Option的方法
2017/05/17 Javascript
原生JavaScript实现的简单省市县三级联动功能示例
2017/05/27 Javascript
[js高手之路]从原型链开始图解继承到组合继承的产生详解
2017/08/28 Javascript
fetch 使用及如何接收JS传值
2017/11/11 Javascript
微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】
2017/12/05 Javascript
Vue使用高德地图搭建实时公交应用功能(地图 + 附近站点+线路详情 + 输入提示+换乘详情)
2018/05/16 Javascript
解决angularjs中同步执行http请求的方法
2018/08/13 Javascript
Vue中对拿到的数据进行A-Z排序的实例
2018/09/25 Javascript
Vue-input框checkbox强制刷新问题
2019/04/18 Javascript
JS合并两个数组的3种方法详解
2019/10/24 Javascript
JS检索下拉列表框中被选项目的索引号(selectedIndex)
2019/12/17 Javascript
jQuery实现开关灯效果
2020/08/02 jQuery
Vue全局使用less样式,组件使用全局样式文件中定义的变量操作
2020/10/21 Javascript
vue实现防抖的实例代码
2021/01/11 Vue.js
python函数局部变量用法实例分析
2015/08/04 Python
简单的python协同过滤程序实例代码
2018/01/31 Python
Python必须了解的35个关键词
2020/07/16 Python
CSS3贝塞尔曲线示例:创建链接悬停动画效果
2020/11/19 HTML / CSS
英国豪华针织品牌John Smedley的在线销售商:The Outlet by John Smedley
2018/04/08 全球购物
美国智能家居专家:tink
2019/06/04 全球购物
爱岗敬业演讲稿范文
2014/01/14 职场文书
军训自我鉴定200字
2014/02/13 职场文书
语文课外活动总结
2014/08/27 职场文书
物业工程部岗位职责
2015/02/11 职场文书
红高粱观后感
2015/06/10 职场文书
nginx结合openssl实现https的方法
2021/07/25 Servers