代码思路:
- 将页面写成左右两部分,左边显示数组的偶数,右边显示数组的奇数;
- 用js判断图片的高度,用作计算内容的高度(注:图片高度自适应,除图片之外的其他内容的高度应全部一样,方便计算)
- !分别计算左右两边的内容高度, 计算两边的高度差(h),查找较高一边的数组中与高度差(h)的一半相近的图片元素;
- 这里是较为麻烦的一步:需要给每个数组中添加一个参数,例:position,默认为‘center’;如果要将左边的图片移到右边,将第三步中查找出来的元素的‘position’改为‘right’;如果要将右边的图片移到左边,将第三步中查找出来的元素的‘position’改为‘left’;
注:
- 需要添加延时,等内容全部加载完成之后才可将图片移动,否则无法计算图片的高度;
- 因为要移动的图片不确定位置,所以图片移动可能会看到有明显的变化;
- 暂未研究分页加载的需求;
代码:
<view class='list padding_x30 '>
<view class='li_warp dl liLeft li_left' id='liLeft' >
<view class='li ' wx:for='{{list}}' wx:if="{{item.position=='left' || (index%2 == 0&&item.position=='center')}}" wx:key='' >
<view class='li_pic' >
<view class='pic_warp '>
<image src='{{item.pic}}' mode='widthFix' bindload="imageLoadLeft" data-index='{{index}}'></image>
</view>
<view class='pic_text padding20'>
<view class='label'>足球</view>
<view class='address_'>河南省郑州市</view>
<view>2019/01/01 15:00-17:00</view>
</view>
</view>
<view class='tlt bold tlt_height' >不运动,何以健康,何以生活</view>
<view class='flex_ f24'>
<view class=' gray' wx:if='{{false}}'>个人约战</view>
<view class=' gray' wx:else>球队约战</view>
</view>
</view>
</view>
<view class='li_warp dl liRight li_right' id='liRight'>
<view class='li' wx:for='{{list}}' wx:if="{{item.position=='right' || (index%2 == 1&&item.position=='center')}}" wx:key='' >
<view class='li_pic'>
<view class='pic_warp '>
<image src='{{item.pic}}' mode='widthFix' bindload="imageLoadRight" data-index='{{index}}'></image>
</view>
<view class='pic_text padding20'>
<view class='label'>足球</view>
<view>河南省郑州市</view>
<view>2019/01/01 15:00-17:00</view>
</view>
</view>
<view class='tlt bold'>不运动,何以健康,何以生活</view>
<view class='flex_ f24'>
<view class=' gray' wx:if='{{true}}'>个人约战</view>
<view class=' gray' wx:else>球队约战</view>
</view>
</view>
</view>
</view>
css
.list{position: relative;}
.liLeft{position: absolute;top: 0;left: 30rpx;width: 100%;}
.liRight{position: absolute;top: 0;right: 30rpx;width: 100%;}
.li_warp{width: 44%;}
.li{width: 100%;margin-bottom: 40rpx;}
.li_pic{position: relative;color: #fff;border-radius: 10rpx;overflow: hidden;}
.li_pic .pic_warp{width: 100%;}
.li_pic .pic_warp.picHeight_{height: 250rpx;}
.li_pic .pic_warp image{width: 100%;height: 100%;}
.li_pic .pic_text{position: absolute;bottom: 0;left: 0;width: 100%;font-size: 24rpx;z-index: 1;background: linear-gradient(-180deg, rgba(0,0,0,0.00) 30%, #000000 100%);}
.li_pic .pic_text .label{height: 40rpx;line-height: 40rpx;padding: 0 20rpx;background: #000000;color: #fff;display: inline-block;border-radius: 40rpx;}
.li .tlt{overflow: hidden;text-overflow: ellipsis;word-break: break-all; display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp:1;margin-top: 16rpx;margin-bottom: 4rpx;}
js:
Page({
/**
* 页面的初始数据
*/
data: {
//上传的图片高度
list: [{
pic: '/image/pic1.jpg',
position: 'center',
height: ''
}, {
pic: '/image/pic2.jpg',
position: 'center',
height: ''
}, {
pic: '/image/pic3.jpg',
position: 'center',
height: ''
}, {
pic: '/image/pic1.jpg',
position: 'center',
height: ''
}, {
pic: '/image/pic1.jpg',
position: 'center',
height: ''
}, {
pic: '/image/pic2.jpg',
position: 'center',
height: ''
}, {
pic: '/image/pic2.jpg',
position: 'center',
height: ''
}, {
pic: '/image/pic2.jpg',
position: 'center',
height: ''
}, {
pic: '/image/pic3.jpg',
position: 'center',
height: ''
}, {
pic: '/image/pic2.jpg',
position: 'center',
height: ''
}, {
pic: '/image/pic3.jpg',
position: 'center',
height: ''
}, {
pic: '/image/pic3.jpg',
position: 'center',
height: ''
}, {
pic: '/image/pic3.jpg',
position: 'center',
height: ''
}, {
pic: '/image/pic2.jpg',
position: 'center',
height: ''
}, {
pic: '/image/pic3.jpg',
position: 'center',
height: ''
}, {
pic: '/image/pic2.jpg',
position: 'center',
height: ''
}],
leftHeight: 0,
rightHeight: 0,
picHeight: '',
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
onShow: function () {
this.height_()
},
//左边的图片高度之和
imageLoadLeft: function (e) {
//获取图片的原始宽度和高度
let originalWidth = e.detail.width;
let originalHeight = e.detail.height;
let picHeight = this.data.picHeight
picHeight = 165 / originalWidth * originalHeight
var list = this.data.list
let index = e.currentTarget.dataset.index
list[index].height = picHeight
this.setData({
list: list
})
this.data.leftHeight += picHeight
},
//右边的图片高度之和
imageLoadRight: function (e) {
//获取图片的原始宽度和高度
let originalWidth = e.detail.width;
let originalHeight = e.detail.height;
let picHeight = this.data.picHeight
picHeight = 165 / originalWidth * originalHeight
var list = this.data.list
let index = e.currentTarget.dataset.index
list[index].height = picHeight
this.setData({
list: list
})
this.data.rightHeight += picHeight
},
height_: function () {
var that = this
var list = that.data.list
setTimeout(() => {
var leftHeight = that.data.leftHeight
var rightHeight = that.data.rightHeight
var disparity_ = ''
disparity_ = Math.abs(leftHeight - rightHeight)
var min_ = { a: 300, index: 0 }
// console.log(disparity_)
if (leftHeight > rightHeight && disparity_ > 100) {
for (var i = 0; i < list.length; i += 2) {
var tmp = Math.abs(list[i].height - disparity_) / 2
if (tmp < min_.a) {
min_ = { a: tmp, index: i }
// console.log(min_)
}
// console.log(list[i].height, disparity_)
}
list[min_.index].position = 'right'
}
if (leftHeight < rightHeight && disparity_ > 100) {
for (var i = 1; i < list.length; i += 2) {
var tmp = Math.abs(list[i].height - disparity_) / 2
if (tmp < min_.a) {
min_ = { a: tmp, index: i }
// console.log(min_)
}
// console.log(list[i].height, disparity_)
}
list[min_.index].position = 'left'
}
console.log(list)
this.setData({
list: list
})
}, 1000)
}
})
效果图: