Code idea:
- Write the page into left and right parts, the left side shows the even number of the array, and the right side shows the odd number of the array;
- Use js to determine the height of the picture, which is used to calculate the height of the content (Note: The height of the picture is adaptive, and the height of all other content except the picture should be the same for easy calculation)
- ! Calculate the height of the content on the left and right sides, calculate the height difference (h) between the two sides, and find the picture elements that are close to half of the height difference (h) in the upper side of the array;
- Here is the more troublesome step: you need to add a parameter to each array, for example: position, the default is'center'; if you want to move the image on the left to the right, set the'position' of the element found in the third step Change it to'right'; if you want to move the image on the right to the left, change the'position' of the element found in the third step to'left';
Note:
- A delay needs to be added, and the picture can be moved after the content is fully loaded, otherwise the height of the picture cannot be calculated;
- Because the position of the picture to be moved is uncertain, so the picture movement may see obvious changes;
- The demand for paging loading has not been studied yet;
Code:
<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)
}
})
Effect picture:
