各位！今天我们讨论一下关于网站图片排列混乱这件有趣的事情。你们有没有在网上浏览到过看上去就像是乱石飞瀑似的各种图？那么为什么会这样？快跟我一起找找原因！
看懂这个瀑布流布局吗？其实，就是把好多同样大小的东西排好队，然后它们自动缩小，直到变成我们要的宽度。接着，一个个往最下面那部分放进去。最后就能得到看着有点乱但是很特别的效果~
jsData: {
columnsHeight: [0, 0],
isLoading: false
},
data: {
columns: [
[],
[]
],
tempPics: []
}
瀑布流布局有时会遇到一个小麻烦：图片一加载完，小的那些可能会提前蹦出来，这下排列顺序就乱套咯！为了搞定它，我想出了这么个办法：把每个图的大小记下来，等全都加载好后再统一渲染到页面上。
onLoad: function() {
this.loadData()
},
onReachBottom: function() {
this.loadData()
}
不过，这个办法有点小问题。加载图片时先得把列表数据储存在一个临时表格中，再用它检查每张照片的宽高值。这样的话，有些信息可能还没来得及呈现给用户就暴露咯。虽然这对瀑布流那种特殊设计影响不大，至少用户可能会感到困惑！
别担心，这回我们找到新方法了！咱们可以悄无声息地将图片加载上去，然后利用那个图片的bindload属性找出真实大小并存入数据库，这样就能解决数据隐藏的问题了。但是要小心处理加载失败的情况，以免出现意外状况。
接下来我们来学习如何把图放入瀑布流布局里。所有的图都下载好了之后，先扩大视野把整个列表浏览一遍，耐心地把每个图一个一个放到最底下那一栏里。记得要调整这一栏的高度，以免下次搞砸。至于怎么展示这些图？这个就需要image组件的widthFix模式咯。只要确保图片尺寸相同，不论是加载成功还是失败，它们都会被展示为正方形的形状~
loadPic: function(e) {
var that = this,
data = that.data,
tempPics = data.tempPics,
index = e.currentTarget.dataset.index
if (tempPics[index]) {
//以750为宽度算出相对应的高度
tempPics[index].height = e.detail.height * 750 / e.detail.width
tempPics[index].isLoad = true
}
that.setData({
tempPics: tempPics
}, function() {
that.finLoadPic()
})
}
说到这，我也试了试用那个wx.getImageInfo来获取图像大小。代码的确简单多了，但速度却慢了些。估计是因为它给的是本地路径，要在服务器上处理临时文件之类的东西，花费时间较长。所以，如果可以的话，最好就让后端直接给出图像大小信息就好了，这样就能避免小程序这边出岔子。
为啥不能用瀑布流弄小程序？其实嘛主要有几个原因。首先，瀑布流加载大数据的话，会让页面变得超级迟钝慢腾腾。其次就是，瀑布流在各种型号手机跟设备上都难搞得定，没法做到完美适配。那布置模式选啥好嘞？这就要看具体情况。咱今天不是说了瀑布流咋做、面对这些问题怎么办了吗。希望我说的对你们有点帮助哈。至于你还有啥想问的或者有好主意，尽管说，到下面评论里交流下，大家一起讨论嘛!不过别忘了点赞转发呦！
finLoadPic: function() {
var that = this,
data = that.data,
tempPics = data.tempPics,
length = tempPics.length,
fin = true
for (var i = 0; i < length; i++) {
if (!tempPics[i].isLoad) {
fin = false
break
}
}
if (fin) {
wx.hideLoading()
if (that.jsData.isLoading) {
that.jsData.isLoading = false
that.renderPage()
}
}
}
评论0