小程序瀑布流解決左右兩邊高度差距過大的問題
我要評論想要實現(xiàn)瀑布流的布局效果，并且是按照從左到右順序顯示的話，css布局方式暫時還不能滿足我們的需求。參考小紅書的瀑布流效果，小紅書是分左右兩欄的，按照奇數(shù)偶數(shù)來顯示就可以。
<view class="waterfall">
<view class="waterfall-left">
<view wx:if="{{index%2 == 0}}" class="item"></view>
</view>
<view class="waterfall-right">
<view wx:if="{{index%2 == 1}}" class="item"></view>
</view>
</view>
但是問題來了，隨著每個元素高度的不確定性，很大幾率會出現(xiàn)左右兩欄高度相差大的問題。
解決方法：
要解決這個問題，我們要找出導(dǎo)致每個元素的高度不同的原因，一般是圖片的高度，也可能是根據(jù)條件顯示的某些區(qū)域，建議只有圖片的高度不同，其它部分的高度保持不變，這會使得我們的計算變得簡單。
大概思路，取得左右兩欄的高度，計算左右兩欄的高請輸入代碼度差值，移動兩欄差值threshold的2分之1，如圖：
上面是理想的狀態(tài)，但是我們不可能切開元素，我們要知道高度高的一邊的是否有符合移動的元素，如果高度高的那欄中高度最小的元素minH 小于 差值threshold，那么我們可以移動，可以取長邊某個與差值的二分之一高度最接近的一個元素minH(一般是高度最小的那個，也可以取巧地移動高度最小的一個)。如果高度最小的元素比差值還大，則不需要移動。
那么怎么移動，默認給元素一個屬性position，值為center，如果該元素要移動到左邊，那么給該元素一個屬性：position:left;優(yōu)先根據(jù)position屬性來顯示，其次才根據(jù)奇數(shù)偶數(shù)來顯示，如下：
<view class="waterfall">
<view class="waterfall-left">
<view wx:if="{{item.position=='left' || (index%2 == 0&&item.position=='center')}}" class="item"></view>
</view>
<view class="waterfall-right">
<view wx:if="{{item.position=='right' || (index%2 == 1&&item.position=='center')}}" class="item"></view>
</view>
</view>
至此，高度相差較大的問題就可以解決了。
我們?nèi)绾斡嬎銉蓹诘母叨饶兀?/strong>
重點是獲取圖片的寬高，我們就可以知道兩欄的高度，這里分兩種情況：
1. 接口返回圖片的寬高
接口返回了圖片的寬高，那么我們直接累加圖片的高度，就可以比較兩欄的高度，得出高度差。
如果較高的一邊的minH比兩欄高度的差值threshold小，即minH < threshold,那么minH就需要移動
這種方式在拿到數(shù)據(jù)的同時，我們就可以知道某個元素是否需要移動。處理完數(shù)據(jù)后馬上渲染到視圖層。
這種方法當然是最省心的，但是接口也有可能不返回圖片的寬高，于是就要用第2種方法了。
2. 接口不返回圖片的寬高，在圖片load事件取得圖片寬高
監(jiān)聽圖片的load事件，獲得圖片的寬高，在最后一張圖片load完之后，用boundingClientRect測量兩欄的高度，得出高度差。
這種方法則必須在圖片加載完，再測量某個元素是否需要移動，元素移動會比較明顯。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
- Microdata作為HTML5新增的一個特性，它允許開發(fā)者在HTML文檔中添加更多的語義信息，以便于搜索引擎和瀏覽器更好地理解頁面內(nèi)容，本文將探討HTML5中Microdata的使用方法以及2025-04-21
在HTML語法中，表格主要通過< table >、< tr >和< td >3個標簽構(gòu)成,本文通過實例代碼講解HTML5表格語法格式，感興趣的朋友一起看看吧2025-04-21- 這篇文章主要介紹了HTML5中使用媒體查詢和Flexbox進行響應(yīng)式布局的方法,簡要介紹了CSS Grid布局的基礎(chǔ)知識和如何實現(xiàn)自動換行的網(wǎng)格布局，感興趣的朋友一起看看吧2025-04-21
基于Canvas的Html5多時區(qū)動態(tài)時鐘實戰(zhàn)代碼
本文介紹了如何使用Canvas在HTML5上實現(xiàn)一個多時區(qū)動態(tài)時鐘的web展示,通過Canvas的API,可以繪制出6個不同城市的時鐘,并且這些時鐘可以動態(tài)轉(zhuǎn)動,每個時鐘上都會標注出對應(yīng)的2025-03-11HTML5 data-*自定義數(shù)據(jù)屬性的示例代碼
HTML5的自定義數(shù)據(jù)屬性（data-*）提供了一種標準化的方法在HTML元素上存儲額外信息,可以通過JavaScript訪問、修改和在CSS中使用,文章還介紹了高級用法,如存儲JSON數(shù)據(jù)、事2025-03-11- 在HTML5中，下拉框（<select>標簽）作為表單的重要組成部分，為用戶提供了一個從預(yù)定義選項中選擇值的方式,本文將深入探討<select>標簽的屬性、樣式，并重點介2025-02-27
本文介紹了HTML5InputDatePicker對象表示HTML``元素,是HTML5中的新對象,介紹了日期、周、月份、時間、日期+時間、本地日期時間等不同類型的日期選擇器，感興趣的朋友一起看2025-02-17
本文介紹了HTML5中的超鏈接、相對路徑和圖片的使用方法,超鏈接可以創(chuàng)建指向另一個文檔或頁面內(nèi)部書簽的鏈接,相對路徑用于在同一服務(wù)器內(nèi)部跳轉(zhuǎn)頁面,圖片標簽用于引入外部圖2025-02-17- 本文介紹了HTML5超鏈接的創(chuàng)建方法,包括基本語法、創(chuàng)建圖像超鏈接的邊框去除方法以及錨點鏈接的使用,還討論了超鏈接的四種不同狀態(tài)（link、visited、hover、active）的CSS樣2025-02-17
最近看一些技術(shù)網(wǎng)站發(fā)現(xiàn)了details 標簽的妙用，這個不用js即可實現(xiàn)展開/收縮信息，很方便用來讓用戶先才答案，然后下面點擊再給出答案的效果，這里就為大家簡單介紹一下，2024-11-03
