這篇文章主要介紹小程序瀑布流如何解決左右兩邊高度差距過大的問題，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),三江侗企業(yè)網(wǎng)站建設(shè),三江侗品牌網(wǎng)站建設(shè),網(wǎng)站定制,三江侗網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,三江侗網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

想要實(shí)現(xiàn)瀑布流的布局效果，并且是按照從左到右順序顯示的話，css布局方式暫時(shí)還不能滿足我們的需求。參考小紅書的瀑布流效果，小紅書是分左右兩欄的，按照奇數(shù)偶數(shù)來顯示就可以。

但是問題來了，隨著每個(gè)元素高度的不確定性，很大幾率會(huì)出現(xiàn)左右兩欄高度相差大的問題。

解決方法：

要解決這個(gè)問題，我們要找出導(dǎo)致每個(gè)元素的高度不同的原因，一般是圖片的高度，也可能是根據(jù)條件顯示的某些區(qū)域，建議只有圖片的高度不同，其它部分的高度保持不變，這會(huì)使得我們的計(jì)算變得簡單。
大概思路，取得左右兩欄的高度，計(jì)算左右兩欄的高請輸入代碼度差值，移動(dòng)兩欄差值threshold的2分之1，如圖：

上面是理想的狀態(tài)，但是我們不可能切開元素，我們要知道高度高的一邊的是否有符合移動(dòng)的元素，如果高度高的那欄中高度最小的元素minH 小于 差值threshold，那么我們可以移動(dòng)，可以取長邊某個(gè)與差值的二分之一高度最接近的一個(gè)元素minH(一般是高度最小的那個(gè)，也可以取巧地移動(dòng)高度最小的一個(gè))。如果高度最小的元素比差值還大，則不需要移動(dòng)。

那么怎么移動(dòng)，默認(rèn)給元素一個(gè)屬性position，值為center，如果該元素要移動(dòng)到左邊，那么給該元素一個(gè)屬性：position:left;優(yōu)先根據(jù)position屬性來顯示，其次才根據(jù)奇數(shù)偶數(shù)來顯示，如下：

至此，高度相差較大的問題就可以解決了。

我們?nèi)绾斡?jì)算兩欄的高度呢？

重點(diǎn)是獲取圖片的寬高，我們就可以知道兩欄的高度，這里分兩種情況：

1. 接口返回圖片的寬高

接口返回了圖片的寬高，那么我們直接累加圖片的高度，就可以比較兩欄的高度，得出高度差。

如果較高的一邊的minH比兩欄高度的差值threshold小，即minH < threshold,那么minH就需要移動(dòng)

這種方式在拿到數(shù)據(jù)的同時(shí)，我們就可以知道某個(gè)元素是否需要移動(dòng)。處理完數(shù)據(jù)后馬上渲染到視圖層。

這種方法當(dāng)然是最省心的，但是接口也有可能不返回圖片的寬高，于是就要用第2種方法了。

2. 接口不返回圖片的寬高，在圖片load事件取得圖片寬高

監(jiān)聽圖片的load事件，獲得圖片的寬高，在最后一張圖片load完之后，用boundingClientRect測量兩欄的高度，得出高度差。

這種方法則必須在圖片加載完，再測量某個(gè)元素是否需要移動(dòng)，元素移動(dòng)會(huì)比較明顯。

以上是“小程序瀑布流如何解決左右兩邊高度差距過大的問題”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站欄目：小程序瀑布流如何解決左右兩邊高度差距過大的問題-創(chuàng)新互聯(lián)
文章轉(zhuǎn)載：http://weahome.cn/article/cejodj.html