小程序瀑布流

上个写的有潜在bug，这个是修复此bug的。

思路：

布局依然是两列col1，col2，利用image标签的bindload函数，监听图片加载完成事件，加载完成后，转化改图片宽高，并且判断应该放到col1里还是col2里。并分别记录col1和col2的高度，以便下次判断。

效果图：

html 部分：

<block wx:for="{{imagesList}}">

<image src='{{item.pic}}' data-index='{{item.id}}' class='hide' bindload='reserveimg'></image>

</block>

<scroll-view style="height:{{scrollH}}rpx" class='scroll' bindscrolltolower="loadImages" scroll-y='true'>

<view class='col1'>

<block wx:for="{{col1}}">

<image src='{{item.pic}}' style='width:{{item.width}}rpx;height:{{item.height}}rpx;'></image>

</block>

</view>

<view class='col2'>

<block wx:for="{{col2}}">

<image src='{{item.pic}}' style='width:{{item.width}}rpx;height:{{item.height}}rpx;'></image>

</block>

</view>

</scroll-view>

css部分：

.scroll{

width: 720rpx;

margin: 0 auto;

}

.col1{

width: 350rpx;

float: left;

}

.col2{

width: 350rpx;

float: left;

margin-left: 20rpx;

}

js部分：

// pages/waterfall/waterfall.js

var col1H = 0;

var col2H = 0;

var col1=[];

var col2=[];

Page({

/**

* 页面的初始数据

*/

data: {

imagesList:[],

scrollH:1500

},

/**

* 生命周期函数--监听页面加载

*/

onLoad: function (options) {

this.loadImages();

},

//图片宽高重置

reserveimg:function(e){

var that = this;

var index = e.currentTarget.dataset.index;

var imgw = e.detail.width;

var imgh = e.detail.height;

var width = 350;

var height = imgh * width / imgw;

for (var i = 0; i < that.data.imagesList.length;i++){

if(i == index){

if (col1H <= col2H) {

col1.push({

"pic": that.data.imagesList[i].pic,

"width": 350,

"height": height,

});

col1H+=height;

} else {

col2.push({

"pic": that.data.imagesList[i].pic,

"width": 350,

"height": height,

})

col2H += height;

}

}

}

that.setData({

col1:col1,

col2:col2

})

console.info(index,col1,col2)

},

//下拉加载

loadImages: function () {

var that = this;

//模拟的加载本地图片数据

let images = [

{ pic: "../images2/1.png", height: 0 },

{ pic: "../images2/2.png", height: 0 },

{ pic: "../images2/3.png", height: 0 },

{ pic: "../images2/4.png", height: 0 },

{ pic: "../images2/5.png", height: 0 },

{ pic: "../images2/6.png", height: 0 },

{ pic: "../images2/7.png", height: 0 },

{ pic: "../images2/8.png", height: 0 },

{ pic: "../images2/9.png", height: 0 },

{ pic: "../images2/10.png", height: 0 },

{ pic: "../images2/11.png", height: 0 },

{ pic: "../images2/12.png", height: 0 },

{ pic: "../images2/13.png", height: 0 },

{ pic: "../images2/14.png", height: 0 }

];

var imagesList = that.data.imagesList;

for (var i = 0; i < images.length;i++){

images[i].id = i

}

var imagesArray = imagesList.concat(images)

this.setData({

imagesList: imagesArray

});

}

})

最后

以上就是魁梧老师为你收集整理的小程序瀑布流的全部内容，希望文章能够帮你解决小程序瀑布流所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。