瀑布流是一種很常見的網(wǎng)頁布局，視覺表現(xiàn)為參差不齊的多欄布局，是一種時(shí)下很流行的布局形式，最近在寫小程序恰好也碰到了，想了幾種不同的實(shí)現(xiàn)方法，接下來就來一起看看具體的實(shí)現(xiàn)方法（所用的方法中用的例子都是兩欄的布局）。
等高的瀑布流等高的瀑布流顧名思義就是瀑布流里的單個(gè)盒子的高度都是一樣的，這種形式的瀑布流實(shí)現(xiàn)起來也比較簡單，因?yàn)椴簧婕暗胶凶痈叨鹊挠?jì)算，舉個(gè)例子：
Page({
data: {
list: [] }
, onLoad () {
let images = [] for (let i = 0;
i i++) {
images.push({
url: '
test'
}
) }
this.setData({
list: images }
) }
}
).fall {
display: flex;
flex-wrap: wrap;
background-color: #f7f7f7;
}
.fall-item {
width: 330rpx;
height: 330rpx;
margin-top: 30rpx;
margin-left: 30rpx;
background-color: aquamarine;
}
為了方便，例子中的盒子內(nèi)容并沒有使用圖片，而是使用了色塊代替，等高瀑布流的實(shí)現(xiàn)可以直接通過flex布局實(shí)現(xiàn)，如例子所示，直接用flex布局，允許換行，設(shè)置好瀑布流里中每一個(gè)盒子的寬高，就能實(shí)現(xiàn)簡單的實(shí)現(xiàn)兩欄瀑布流布局不等高瀑布流不等高瀑布流是更為常見的形式，不等高瀑布流涉及到列高的計(jì)算，由于每個(gè)盒子的高度不一樣，因此需要每一列的列高都要記錄、比較，將下一個(gè)盒子插入高度矮的一列，接下來就來看看不等高瀑布流的實(shí)現(xiàn)方式已知盒子高度一般瀑布流里展示的都是圖片，這種情況指的是服務(wù)端會(huì)返給前端要展示的圖片的寬高，這種情況下相對也比較簡單，因?yàn)榉?wù)端會(huì)返回圖片的寬高，前端只需要計(jì)算一下列高，將下一張圖片插入矮的那里一列就可以，舉個(gè)例子：
.fall {
display: flex;
background-color: #f7f7f7;
}
.fall-column {
display: flex;
flex-direction: column;
margin-left: 30rpx;
}
.fall-column-item {
width: 330rpx;
margin-top: 30rpx;
background-color: aquamarine;
}
Page({
data: {
images: [{
width: 360, height: 540 }
, {
width: 480, height: 540 }
, {
width: 540, height: 720 }
, {
width: 720, height: 960 }
, {
width: 540, height: 960 }
, {
width: 360, height: 720 }
, {
width: 360, height: 960 }
, {
width: 540, height: 540 }
, {
width: 540, height: 1440 }
, {
width: 960, height: 1440 }
], heightArr: [], list: [], col: 2 }
, onLoad () {
this.initData(2) }
, initData (col) {
let images = [] let scale = 2 // 模擬圖片寬高 for (let i = 0;
i i++) {
let image = this.data.images[Math.floor(Math.random() * 10)] images.push(image) }
for (let i in images) {
let height = 165 / images[i].width * images[i].height * scale images[i].showHeight = height // 第一行的兩個(gè)盒子 if (i this.data.list.push([images[i]]) this.data.heightArr.push(height) }
else {
// 選出高度較矮的一列的索引 let minHeight = Math.min.apply(null, this.data.heightArr) let minHeightIndex = this.data.heightArr.indexOf(minHeight) this.data.list[minHeightIndex].push(images[i]) this.data.heightArr[minHeightIndex] += height }
}
this.setData({
list: this.data.list }
) }
, onReachBottom () {
this.initData(0) }
}
)上例中為了方便也是用色塊模擬了圖片，在js中模擬了10張圖片的寬高，每次從中隨機(jī)取10張圖片，定義了兩列，每次計(jì)算一下每列的高度，將圖片插入矮的那一列，然后將記錄用高度數(shù)組，將圖片的高度累加，實(shí)現(xiàn)起來也很簡單未知盒子高度未知盒子高度的情況下，我們要怎么做呢？wx.getImageInfo第一種辦法就是通過wx.getImageInfo可以獲取到圖片寬高信息，舉個(gè)例子：
.fall {
display: flex;
background-color: #f7f7f7;
}
.fall-column {
display: flex;
flex-direction: column;
margin-left: 30rpx;
}
.fall-column-item {
margin-top: 30rpx;
line-height: 0;
}
.fall-column-item-img {
width: 330rpx;
}
import api from '
../../api/index'
Page({
data: {
list: [], heightArr: [] }
, async onLoad () {
let {
results}
= await api.fetchImages() let col = 2 for (let i in results) {
results[i].cover = results[i].imageUrl // 獲取圖片信息 let info = await this.loadImage(results[i].cover) results[i].height = 165 / info.width * info.height if (i this.data.list.push([results[i]]) this.data.heightArr.push(results[i].height) }
else {
let minHeight = Math.min.apply(null, this.data.heightArr) let minHeightIndex = this.data.heightArr.indexOf(minHeight) this.data.list[minHeightIndex].push(results[i]) this.data.heightArr[minHeightIndex] += results[i].height }
}
this.setData({
list: this.data.list }
) }
, loadImage (cover) {
return new Promise(resolve => {
wx.getImageInfo({
src: cover, success: (res) => {
resolve(res) }
}
) }
) }
}
)當(dāng)服務(wù)端沒有返回圖片的寬高時(shí)，可以直接通過wx.getImageInfo()獲取到圖片的信息，這里為了不打亂服務(wù)返回時(shí)的圖片順序，特意將這個(gè)單獨(dú)用Promise封了一層，就是為了圖片加載完一張?jiān)佾@取下一張，但是當(dāng)圖片比較大的時(shí)候就會(huì)導(dǎo)致加載的時(shí)間會(huì)很長，會(huì)有長時(shí)間的白屏：
這是因?yàn)閣x.getImageInfo()獲取圖片信息的時(shí)候會(huì)先將圖片下載下來，然后才能獲取圖片信息，這就導(dǎo)致時(shí)間會(huì)比較長，但是如果不需要圖片加載順序時(shí)可以考慮直接并行加載，不等上一張圖片加載完就加載下一張，這樣就能更快的展現(xiàn)wx.getImageInfo優(yōu)化既然圖片加載獲取信息時(shí)間比較長，那考慮是否可以加上一個(gè)默認(rèn)的圖片，這樣用戶能在第一時(shí)間看到有內(nèi)容展示，圖片信息拿到后再將圖片顯示出來，舉個(gè)例子：
.fall {
display: flex;
background-color: #f7f7f7;
}
.fall-column {
display: flex;
flex-direction: column;
margin-left: 30rpx;
}
.fall-column-item {
position: relative;
margin-top: 30rpx;
line-height: 0;
background-color: #ccc;
}
.fall-column-item::after {
content: '
加載中'
;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: inline-block;
color: #666;
}
.fall-column-item-img {
position: relative;
width: 330rpx;
z-index: 1;
}
import api from '
../../api/index'
Page({
data: {
list: [], heightArr: [] }
, async onLoad () {
let {
results}
= await api.fetchImages() let col = 2 for (let i = 0;
i i++) {
this.data.list[i] = new Array(results.length / 2) }
this.setData({
list: this.data.list }
) for (let i in results) {
results[i].cover = results[i].imageUrl let info = await this.loadImage(results[i].cover) results[i].height = 165 / info.width * info.height if (i this.data.list[i][0] = results[i] this.data.heightArr.push(results[i].height) }
else {
let minHeight = Math.min.apply(null, this.data.heightArr) let minHeightIndex = this.data.heightArr.indexOf(minHeight) let index = this.data.list[minHeightIndex].filter(Boolean).length this.data.list[minHeightIndex][index] = results[i] this.data.heightArr[minHeightIndex] += results[i].height }
}
for (let i = 0;
i i++) {
this.data.list[i] = this.data.list[i].filter(Boolean) }
this.setData({
list: this.data.list }
) }
, loadImage (cover) {
return new Promise(resolve => {
wx.getImageInfo({
src: cover, success: (res) => {
resolve(res) }
}
) }
) }
}
)這個(gè)例子中就在圖片沒有加載完之前給了一個(gè)默認(rèn)的加載中的顯示，當(dāng)然這只是一個(gè)簡單的例子，只能提供簡單的優(yōu)化思路，實(shí)際中的加載過渡動(dòng)畫一定會(huì)設(shè)計(jì)得更細(xì)膩云存儲(chǔ)獲取用戶信息一般小程序中用到的圖片都是存儲(chǔ)在云服務(wù)器上的，且云服務(wù)器一般都會(huì)提供在圖片請求地址上帶參數(shù)獲取圖片信息，以阿里云為例，可以在圖片鏈接上拼接?x-oss-process=image/info，就能獲取到圖片信息，舉個(gè)例子：
.fall {
display: flex;
background-color: #f7f7f7;
}
.fall-column {
display: flex;
flex-direction: column;
margin-left: 30rpx;
}
.fall-column-item {
position: relative;
margin-top: 30rpx;
line-height: 0;
background-color: #ccc;
}
.fall-column-item::after {
content: '
加載中'
;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: inline-block;
color: #666;
}
.fall-column-item-img {
position: relative;
width: 330rpx;
z-index: 1;
}
let fetchPicInfo = async (url) => {
let [err, result] = await to(testFly.get(`${
url}
?x-oss-process=image/info`)) if (err) throw err return result.data }
import api from '
../../api/index'
Page({
data: {
list: [], heightArr: [] }
, async onLoad () {
let {
results}
= await api.fetchImages() let col = 2 for (let i = 0;
i i++) {
this.data.list[i] = new Array(results.length / 2) }
this.setData({
list: this.data.list }
) for (let i in results) {
results[i].cover = results[i].imageUrl let info = await api.fetchPicInfo(results[i].cover) results[i].height = 165 / info.ImageWidth.value * info.ImageHeight.value if (i this.data.list[i][0] = results[i] this.data.heightArr.push(results[i].height) }
else {
let minHeight = Math.min.apply(null, this.data.heightArr) let minHeightIndex = this.data.heightArr.indexOf(minHeight) let index = this.data.list[minHeightIndex].filter(Boolean).length this.data.list[minHeightIndex][index] = results[i] this.data.heightArr[minHeightIndex] += results[i].height }
}
for (let i = 0;
i i++) {
this.data.list[i] = this.data.list[i].filter(Boolean) }
this.setData({
list: this.data.list }
) }
}
)通過這個(gè)方法可以大大減少圖片加載的時(shí)間，不需要將圖片下載到本地在獲取圖片信息，而是直接向服務(wù)器請求圖片信息，再加上每次請求只會(huì)返回圖片基本信息就幾個(gè)字段，因此請求時(shí)間也非常短，如圖：
這樣用戶能更快看到圖片顯示，同時(shí)也加上了圖片加載時(shí)的過渡效果，這樣體驗(yàn)效果會(huì)更好總結(jié)這篇文章把最近在寫小程序時(shí)遇到的瀑布流做了一個(gè)比較詳細(xì)的總結(jié)，不同的情況下選擇不同的加載方案，體驗(yàn)效果最好的當(dāng)然還是服務(wù)端直接返回圖片信息，這樣能節(jié)省很多獲取圖片信息要花的時(shí)間，這樣用戶體驗(yàn)更優(yōu)，希望能對各位在寫小程序瀑布流能有所幫助。
如果有錯(cuò)誤或不嚴(yán)謹(jǐn)?shù)牡胤?，歡迎批評(píng)指正，如果喜歡，歡迎點(diǎn)贊推薦教程：
《微信小程序》以上就是小程序中的瀑布流的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！
微信
分享相關(guān)標(biāo)簽：
前端 小程序本文轉(zhuǎn)載于：
segmentfault，如有侵犯，請聯(lián)系[email protected]刪除
上一篇：
微信小程序wx.request請求數(shù)據(jù)報(bào)錯(cuò)
下一篇：
微信小程序加載失敗是什么原因？相關(guān)文章相關(guān)視頻小程序文本溢出時(shí)，如何顯示為省略號(hào)？小程序內(nèi)容更新提示小紅點(diǎn)如何實(shí)現(xiàn)？小程序性能優(yōu)化的幾點(diǎn)實(shí)踐技巧小程序可以導(dǎo)入視頻嗎？小程序頁面跳轉(zhuǎn)路徑怎么獲??？小程序中的瀑布流第三方平臺(tái)開發(fā)小程序（一）小程序項(xiàng)目介紹預(yù)覽認(rèn)識(shí)小程序開發(fā)工具 [溫州做小程序]