微信小程序通过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 相关文章推荐
浅析js封装和作用域
Jul 09 Javascript
JS+flash实现chrome和ie浏览器下同时可以复制粘贴
Sep 22 Javascript
用js控制组织结构图可以任意拖拽到指定位置
Jan 17 Javascript
使用jquery中height()方法获取各种高度大全
Apr 02 Javascript
JQuery EasyUI的使用
Feb 24 Javascript
JavaScript基础教程——入门必看篇
May 20 Javascript
jQuery实现公告新闻自动滚屏效果实例代码
Jul 14 Javascript
vue 指令之气泡提示效果的实现代码
Oct 18 Javascript
浅谈Vue.js 中的 v-on 事件指令的使用
Nov 25 Javascript
使用VueRouter的addRoutes方法实现动态添加用户的权限路由
Jun 03 Javascript
layer.open提交子页面的form和layedit文本编辑内容的方法
Sep 27 Javascript
基于JS判断对象是否是数组
Jan 10 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 不错的学习资料
2009/02/06 PHP
CI框架Session.php源码分析
2014/11/03 PHP
PHP也能干大事 随机函数
2015/04/14 PHP
php结合ajax实现手机发红包的案例
2016/10/13 PHP
tp5(thinkPHP5)操作mongoDB数据库的方法
2018/01/20 PHP
ThinkPHP框架整合微信支付之刷卡模式图文详解
2019/04/10 PHP
TP5框架model常见操作示例小结【增删改查、聚合、时间戳、软删除等】
2020/04/05 PHP
firefox中用javascript实现鼠标位置的定位
2007/06/17 Javascript
javascript 函数调用规则
2009/08/26 Javascript
document.getElementBy(&quot;id&quot;)与$(&quot;#id&quot;)有什么区别
2013/09/22 Javascript
如何学习Javascript入门指导
2013/11/01 Javascript
javascript排序函数实现数字排序
2015/06/26 Javascript
jQuery实现背景弹性滚动的导航效果
2016/06/01 Javascript
ES6概念 Symbol.keyFor()方法
2016/12/25 Javascript
详解JS: reduce方法实现 webpack多文件入口
2017/02/14 Javascript
js中的DOM模拟购物车功能
2017/03/22 Javascript
Javascript ES6中对象类型Sets的介绍与使用详解
2017/07/17 Javascript
浅谈vue,angular,react数据双向绑定原理分析
2017/11/28 Javascript
详解微信小程序调起键盘性能优化
2018/07/24 Javascript
vue canvas绘制矩形并解决由clearRec带来的闪屏问题
2019/09/02 Javascript
uin-app+mockjs实现本地数据模拟
2020/08/26 Javascript
flask中主动抛出异常及统一异常处理代码示例
2018/01/18 Python
解决Python3 抓取微信账单信息问题
2019/07/19 Python
python实现机器人卡牌
2019/10/06 Python
pycharm设置python文件模板信息过程图解
2020/03/10 Python
win10从零安装配置pytorch全过程图文详解
2020/05/08 Python
将python字符串转化成长表达式的函数eval实例
2020/05/11 Python
Python基于数列实现购物车程序过程详解
2020/06/09 Python
详解python中的闭包
2020/09/07 Python
html5录音功能实战示例
2019/03/25 HTML / CSS
澳大利亚购买最佳炊具品牌网站:Cookware Brands
2019/02/16 全球购物
C语言开发工程师测试题
2016/12/20 面试题
我读书我快乐演讲稿
2014/05/07 职场文书
食品安全承诺书范文
2014/08/29 职场文书
php7中停止php-fpm服务的方法详解
2021/05/09 PHP
三种方式清除vue路由跳转router-link的历史记录
2022/04/10 Vue.js