小程序瀑布流解决左右两边高度差距过大的问题


Posted in HTML / CSS onFebruary 20, 2019

想要实现瀑布流的布局效果,并且是按照从左到右顺序显示的话,css布局方式暂时还不能满足我们的需求。参考小红书的瀑布流效果,小红书是分左右两栏的,按照奇数偶数来显示就可以。

<view class="waterfall">
     <view class="waterfall-left">
           <view wx:if="{{index%2 == 0}}" class="item"></view>
     </view>
     <view class="waterfall-right">
           <view wx:if="{{index%2 == 1}}" class="item"></view>
     </view>
</view>

但是问题来了,随着每个元素高度的不确定性,很大几率会出现左右两栏高度相差大的问题。

解决方法:

要解决这个问题,我们要找出导致每个元素的高度不同的原因,一般是图片的高度,也可能是根据条件显示的某些区域,建议只有图片的高度不同,其它部分的高度保持不变,这会使得我们的计算变得简单。
大概思路,取得左右两栏的高度,计算左右两栏的高请输入代码度差值,移动两栏差值threshold的2分之1,如图:

小程序瀑布流解决左右两边高度差距过大的问题

上面是理想的状态,但是我们不可能切开元素,我们要知道高度高的一边的是否有符合移动的元素,如果高度高的那栏中高度最小的元素minH 小于 差值threshold,那么我们可以移动,可以取长边某个与差值的二分之一高度最接近的一个元素minH(一般是高度最小的那个,也可以取巧地移动高度最小的一个)。如果高度最小的元素比差值还大,则不需要移动。

小程序瀑布流解决左右两边高度差距过大的问题

那么怎么移动,默认给元素一个属性position,值为center,如果该元素要移动到左边,那么给该元素一个属性:position:left;优先根据position属性来显示,其次才根据奇数偶数来显示,如下:

<view class="waterfall">
     <view class="waterfall-left">
           <view wx:if="{{item.position=='left' || (index%2 == 0&&item.position=='center')}}" class="item"></view>
     </view>
     <view class="waterfall-right">
           <view wx:if="{{item.position=='right' || (index%2 == 1&&item.position=='center')}}" class="item"></view>
     </view>
</view>

至此,高度相差较大的问题就可以解决了。

我们如何计算两栏的高度呢?

重点是获取图片的宽高,我们就可以知道两栏的高度,这里分两种情况:

1. 接口返回图片的宽高

接口返回了图片的宽高,那么我们直接累加图片的高度,就可以比较两栏的高度,得出高度差。

如果较高的一边的minH比两栏高度的差值threshold小,即minH < threshold,那么minH就需要移动

这种方式在拿到数据的同时,我们就可以知道某个元素是否需要移动。处理完数据后马上渲染到视图层。

这种方法当然是最省心的,但是接口也有可能不返回图片的宽高,于是就要用第2种方法了。

2. 接口不返回图片的宽高,在图片load事件取得图片宽高

监听图片的load事件,获得图片的宽高,在最后一张图片load完之后,用boundingClientRect测量两栏的高度,得出高度差。

这种方法则必须在图片加载完,再测量某个元素是否需要移动,元素移动会比较明显。

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

HTML / CSS 相关文章推荐
使用CSS3实现多列布局与多背景的技巧
Feb 29 HTML / CSS
CSS3实现线性渐变用法示例代码详解
Aug 07 HTML / CSS
使用HTML5 IndexDB存储图像和文件的示例
Nov 05 HTML / CSS
HTML5 语义化结构化规范化
Oct 17 HTML / CSS
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
Jan 09 HTML / CSS
HTML5操作WebSQL数据库的实例代码
Aug 26 HTML / CSS
如何避免常见的6种HTML5错误用法
Nov 06 HTML / CSS
详解px单位html5响应式方案
Mar 08 HTML / CSS
简洁自适应404页面HTML好看的404源码
Dec 16 HTML / CSS
Html5页面播放M4a音频文件
Mar 30 HTML / CSS
HTML通过表单实现酒店筛选功能
May 18 HTML / CSS
详解CSS不定宽溢出文本适配滚动
May 24 HTML / CSS
h5网页水印SDK的实现代码示例
Feb 19 #HTML / CSS
canvas绘图按照contain或者cover方式适配并居中显示
Feb 18 #HTML / CSS
canvas 橡皮筋式线条绘图应用方法
Feb 13 #HTML / CSS
Canvas系列之滤镜效果
Feb 12 #HTML / CSS
canvas学习总结三之绘制路径-线段
Jan 31 #HTML / CSS
移动端Html5中百度地图的点击事件
Jan 31 #HTML / CSS
Html5页面内使用JSON动画的实现
Jan 29 #HTML / CSS
You might like
php上传、管理照片示例
2006/10/09 PHP
PHP面向对象学习笔记之二 生成对象的设计模式
2012/10/06 PHP
php上传图片之时间戳命名(保存路径)
2014/08/15 PHP
PHP中让json_encode不自动转义斜杠“/”的方法
2017/02/28 PHP
Yii2框架实现登陆添加验证码功能示例
2018/07/12 PHP
PHP中ltrim()函数的用法与实例讲解
2019/03/28 PHP
combox改进版 页面原型参考dojo的,比网上jQuery的那些combox功能强,代码更小
2010/04/15 Javascript
js计算字符串长度包含的中文是utf8格式
2013/10/15 Javascript
Get中文乱码IE浏览器Get中文乱码解决方案
2013/12/26 Javascript
jQuery $.each遍历对象、数组用法实例
2015/04/16 Javascript
JavaScript实现多个重叠层点击切换效果的方法
2015/04/24 Javascript
js密码强度检测
2016/01/07 Javascript
非常实用的js验证框架实现源码 附原理方法
2016/06/08 Javascript
Angular.Js的自动化测试详解
2016/12/09 Javascript
Bootstrap实现圆角、圆形头像和响应式图片
2016/12/14 Javascript
vue中的ref和$refs的使用
2018/11/22 Javascript
vue中axios实现数据交互与跨域问题
2019/05/12 Javascript
JS算法题之查找数字在数组中的索引位置
2019/05/15 Javascript
微信小程序wx.request拦截器使用详解
2019/07/09 Javascript
解决Vue动态加载本地图片问题
2019/10/09 Javascript
[04:22]DOTA2上海特级锦标赛主赛事第四日TOP10
2016/03/06 DOTA
Python实现扫描指定目录下的子目录及文件的方法
2014/07/16 Python
Python中用post、get方式提交数据的方法示例
2017/09/22 Python
python退出命令是什么?详解python退出方法
2018/12/10 Python
Python实现九宫格式的朋友圈功能内附“马云”朋友圈
2019/05/07 Python
使用python修改文件并立即写回到原始位置操作(inplace读写)
2020/06/28 Python
Python datetime 如何处理时区信息
2020/09/02 Python
Avène雅漾美国官方网站:敏感肌肤护理专家
2016/10/24 全球购物
Under Armour西班牙官网:美国知名的高端功能性运动品牌
2018/12/12 全球购物
销售经理工作职责范文
2013/12/03 职场文书
大学团支书的自我评价分享
2013/12/14 职场文书
初二物理教学反思
2014/01/29 职场文书
运动会入场词100字
2014/02/06 职场文书
房屋转让协议书范本
2014/04/11 职场文书
详解python中[-1]、[:-1]、[::-1]、[n::-1]使用方法
2021/04/25 Python
vue组件冲突之引用另一个组件出现组件不显示的问题
2022/04/13 Vue.js