首先上成品图片
wxml页面
<!-- 加载图片 -->
<view style="display:none">
<image wx:for="{{goodsList}}" wx:key="id" id="{{item.id}}" src="{{item.pic}}" binderror="goodsError" bindload="goodsListLoad"></image>
</view>
<scroll-view scroll-y="true" style="height:{{scrollH}}px" bindscrolltolower="loadImages" class='cotain'>
<!-- 左布局 -->
<view class='img_item-l'>
<view class='img_item-l-v' wx:for='{{col1}}' wx:key="{{index}}" bindtap='goStoreD' data-id='{{item.good_id}}' data-store='{{item.store_id}}' data-type='{{item.goods_type}}'>
<image src='{{item.pic}}' mode='widthFix' lazy-load></image>
</view>
</view>
<!-- 右布局 -->
<view class='img_item-r'>
<view class='img_item-r-v' wx:for='{{col2}}' wx:key="{{index}}" bindtap='goStoreD' data-id='{{item.good_id}}' data-store='{{item.store_id}}' data-type='{{item.goods_type}}'>
<image src='{{item.pic}}' mode='widthFix' lazy-load></image>
</view>
</view>
</scroll-view>
json布局
/* 瀑布流布局 stat */
.cotain {
width: 750rpx;
box-sizing: border-box;
padding: 0rpx 20rpx 0 20rpx;
}
.img_item-l {
width: 345rpx;
display: inline-block;
vertical-align: top;
box-sizing: border-box;
}
.img_item-l-v {
margin-left: 5rpx;
width: 340rpx;
margin-top: 20rpx;
box-shadow: 0rpx 0 10rpx 0rpx #aaa;
border-radius: 10rpx;
overflow: hidden;
position: relative;
}
.img_item-l-v image {
width: 100%;
vertical-align: top;
}
.img_item-r {
margin-left: 20rpx;
width: 345rpx;
display: inline-block;
vertical-align: top;
box-sizing: border-box;
}
.img_item-r-v {
margin-left: 5rpx;
width: 340rpx;
margin-top: 20rpx;
box-shadow: 0rpx 0 10rpx 0rpx #aaa;
border-radius: 10rpx;
overflow: hidden;
position: relative;
}
.img_item-r-v image {
width: 100%;
vertical-align: top;
}
/* 瀑布流布局 end */
js界面
let col1H = 0;
let col2H = 0;
Page({
data: {
scrollH: 0, //可用屏幕高度
imgWidth: 340, //图片宽度
goodsList: [], //请求到的商品
loadingCount: 0,
col1: [],
col2: [],
},
onLoad: function() {
var that = this
wx.getSystemInfo({
success: (res) => {
that.setData({
scrollH: res.windowHeight,
scrollW: res.windowWidth
});
}
})
that.loadImages()
},
loadImages: function() {
var that = this
console.log('我是加载图片')
let tempGoodsList = [{
pic: "../../images/1.jpg",
height: 0,
id: "img-" + (+new Date()) + '-' + 1
},
{
pic: "../../images/2.jpg",
height: 0,
id: "img-" + (+new Date()) + '-' + 2
},
{
pic: "../../images/3.jpg",
height: 0,
id: "img-" + (+new Date()) + '-' + 3
},
{
pic: "../../images/4.jpg",
height: 0,
id: "img-" + (+new Date()) + '-' + 4
},
{
pic: "../../images/5.jpg",
height: 0,
id: "img-" + (+new Date()) + '-' + 5
},
{
pic: "../../images/6.jpg",
height: 0,
id: "img-" + (+new Date()) + '-' + 6
},
{
pic: "../../images/7.jpg",
height: 0,
id: "img-" + (+new Date()) + '-' + 7
}, {
pic: "../../images/8.jpg",
height: 0,
id: "img-" + (+new Date()) + '-' + 8
},
{
pic: "../../images/9.jpg",
height: 0,
id: "img-" + (+new Date()) + '-' + 9
},
{
pic: "../../images/10.jpg",
height: 0,
id: "img-" + (+new Date()) + '-' + 10
},
{
pic: "../../images/11.jpg",
height: 0,
id: "img-" + (+new Date()) + '-' + 11
}
];
that.setData({
loadingCount: tempGoodsList.length,
goodsList: tempGoodsList
})
},
//图片加载完成
goodsListLoad: function(e) {
var that = this
let imageId = e.currentTarget.id;
let oImgW = e.detail.width; //图片原始宽度
let oImgH = e.detail.height; //图片原始高度
let imgWidth = that.data.imgWidth; //图片设置的宽度
let scale = imgWidth / oImgW; //比例计算
//console.log('scale', scale)
let imgHeight = oImgH * scale; //自适应高度
var tempGoodsList = that.data.goodsList
let imageObj = null;
for (let i = 0; i < tempGoodsList.length; i++) {
let tempGoods = tempGoodsList[i];
if (tempGoods.id === imageId) {
imageObj = tempGoods;
break;
}
}
imageObj.height = imgHeight;
console.log('加载完成0', imageObj)
let loadingCount = that.data.loadingCount - 1;
let col1 = this.data.col1;
let col2 = this.data.col2;
if (col1H <= col2H) {
col1H += imgHeight;
col1.push(imageObj);
} else {
col2H += imgHeight;
col2.push(imageObj);
}
that.setData({
loadingCount: loadingCount,
col1: col1,
col2: col2
})
if (!loadingCount) {
that.setData({
goodsList: []
})
console.log(that.data.goodsList)
}
},
//图片加载失败
goodsError: function(e) {
var that = this
var tempGoodsList = that.data.goodsList
let loadingCount = that.data.loadingCount - 1;
that.setData({
loadingCount: loadingCount
})
if (!loadingCount) {
that.setData({
goodsList: []
})
console.log(that.data.goodsList)
}
console.log('图片加载失败')
console.log(e)
},
})