小程序实现瀑布流（无tab）

效果图：

实现了让图片按照后台返回的顺序显示，而不是按照图片加载出来的先后排序

html部分：

<!--pages/waterfall/waterfall.wxml-->

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

<image src='{{item.pic}}' data-id='{{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}}">

<view class="item">

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

<view class="title">

<text>{{item.title}}</text><text>{{item.price}}</text>

</view>

</view>

</block>

</view>

<view class='col2'>

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

<view class="item">

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

<view class="title">

<text>{{item.title}}</text><text>{{item.price}}</text>

</view>

</view>

</block>

</view>

<view class="loadText">{{loadText}}</view>

</scroll-view>

css部分：

/* pages/waterfall/waterfall.wxss */

.scroll{

width: 750rpx;

margin: 0 auto;

padding: 10rpx 0rpx;

box-sizing: border-box;

}

.col1{

width: 350rpx;

float: left;

margin-left: 15rpx;

margin-top: 20rpx;

}

.col2{

width: 350rpx;

float: left;

margin-left: 20rpx;

margin-top: 20rpx;

}

.loadText{

color: #ccc;

display: block;

width: 100%;

height: 50rpx;

text-align: center;

clear: both;

}

.item{

box-shadow: 2rpx 2rpx 10rpx rgba(0, 0, 0, 0.2);

margin-bottom: 20rpx;

border-radius: 10rpx;

overflow: hidden;

}

.item .title{

font-size: 26rpx;

color: rgb(158, 158, 158);

padding-left: 10rpx;

box-sizing: border-box;

padding-bottom: 10rpx;

}

js部分：

// pages/waterfall/waterfall.js

var col1H = 0;

var col2H = 0;

var col1=[];

var col2=[];

var loadOver = true;

var loadOveropen;

Page({

/**

* 页面的初始数据

*/

data: {

imagesList:[],

scrollH:1500,

loadText:'上拉加载更多',

curpage:0

},

/**

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

*/

onLoad: function (options) {

this.loadImages();

},

/**

* 生命周期函数--监听页面初次渲染完成

*/

onReady: function () {},

/**

* 生命周期函数--监听页面显示

*/

onShow: function () {

col1 = [];

col2 = [];

loadOver = true;

loadOveropen=true;

},

/**

* 生命周期函数--监听页面隐藏

*/

onHide: function () {

},

/**

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

*/

onUnload: function () {

},

/**

* 页面相关事件处理函数--监听用户下拉动作

*/

onPullDownRefresh: function () {},

/**

* 页面上拉触底事件的处理函数

*/

onReachBottom: function () {},

/**

* 用户点击右上角分享

*/

onShareAppMessage: function () {},

//监听图片加载计算出图片显示高度

reserveimg:function(e){

console.info("进入reserveimg计算图片应该显示的高度值", loadOver)

var that = this;

var id = e.currentTarget.dataset.id;

var imgw = e.detail.width;

var imgh = e.detail.height;

var width = 350;

var height = imgh * width / imgw;

var imagesList = that.data.imagesList;

for (let i = 0; i < imagesList.length;i++){

if (imagesList[i].id == id){

imagesList[i].height = height;

}

}

that.setData({

imagesList: imagesList

})

if (loadOveropen){

loadOver = true;

}else{

return;

}

for (let j = 0; j < imagesList.length; j++) {

if (imagesList[j].height == 0) {

loadOver = false;

break;

}

}

console.info("loadOver", loadOver)

if (loadOver) {

that.waterFall();

}

},

//按高度计算放左边还是放右边

waterFall:function(){

loadOveropen = false;

var that = this;

console.info("~~~~~~~~~~~~~~~~~~进来了", that.data.page)

for (let i = (that.data.curpage-1)*10; i < that.data.imagesList.length;i++){

if (col1H <= col2H) {

col1.push({

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

"width": 350,

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

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

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

});

col1H += that.data.imagesList[i].height;

} else {

col2.push({

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

"width": 350,

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

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

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

})

col2H += that.data.imagesList[i].height;

}

}

that.setData({

col1:col1,

col2:col2

})

console.info("col1", col1, "col2", col2, "col1H", col1H, "col2H", col2H);

wx.hideLoading();

 

},

//下拉加载

loadImages: function () {

var that = this;

var imagesList = that.data.imagesList;

if (imagesList.length < that.data.curpage*10){

return;

}

wx.showLoading({

title: '数据加载中',

})

let images = [//模拟返回数据

{ pic: "http://imagefile.xxlimageim.com/QN3746099548478539.jpg", height: 0,price:22,title:'1眼镜啊',id:'ww' },

{ pic: "http://imagefile.xxlimageim.com/AM8583335433596909.jpg", height: 0, price: 22, title: '2眼镜啊', id: '1ww' },

{ pic: "https://imagefile.xxlimageim.com/video/6834a9cfe4464c478fadf2a024fe6948.mp4?vframe/jpg/offset/1", height: 0, price: 22, title: '3眼镜啊', id: 'ww4' },

{ pic: "http://imagesouth.xxlimageim.com/fsg/goodBg.png", height: 0, price: 22, title: '4眼镜啊', id: 'w6w'},

{ pic: "http://imagefile.xxlimageim.com/store222.png", height: 0, price: 22, title: '5眼镜啊', id: 'dww' },

{ pic: "http://imagefile.xxlimageim.com/AM2180466095806475.jpg", height: 0, price: 22, title: '6眼镜啊', id: 'wwe' },

{ pic: "http://imagefile.xxlimageim.com/QN5494964586128192.png", height: 0, price: 22, title: '7眼镜啊', id: 'wwee'},

{ pic: "http://imagefile.xxlimageim.com/QN7021603725147861.jpg", height: 0, price: 22, title: '8眼镜啊', id: 'werew' },

{ pic: "http://imagefile.xxlimageim.com/QN4692413144369694.jpg", height: 0, price: 22, title: '9眼镜啊', id: '55ww' },

{ pic: "http://imagefile.xxlimageim.com/QN6243240551333492.JPG", height: 0, price: 22, title: '10眼镜啊', id: 'werew' },

];

if(images.length<10){

that.setData({

loadText:'已加载全部'

});

}

var imagesArray = imagesList.concat(images);

loadOveropen = true;

that.setData({

imagesList: imagesArray,

curpage: that.data.curpage+1

});

console.info("^^^^^^curpage", that.data.curpage)

}

})