小程式瀑布流效果,解決左右兩邊高度差距過大的問題

2021-09-12 18:10:08 字數 1361 閱讀 9339

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

但是問題來了,隨著每個元素高度的不確定性,很大機率會出現左右兩欄高度相差大的問題。解決方法:要解決這個問題,我們要找出導致每個元素的高度不同的原因,一般是的高度,也可能是根據條件顯示的某些區域,建議只有的高度不同,其它部分的高度保持不變,這會使得我們的計算變得簡單。

大概思路,取得左右兩欄的高度,計算左右兩欄的高請輸入**度差值,移動兩欄差值threshold的2分之1,如圖:

上面是理想的狀態,但是我們不可能切開元素,我們要知道高度高的一邊的是否有符合移動的元素,如果高度高的那欄中高度最小的元素minh小於 差值threshold,那麼我們可以移動,可以取長邊某個與差值的二分之一高度最接近的乙個元素minh(一般是高度最小的那個,也可以取巧地移動高度最小的乙個)。如果高度最小的元素比差值還大,則不需要移動。

那麼怎麼移動,預設給元素乙個屬性position,值為center,如果該元素要移動到左邊,那麼給該元素乙個屬性:position:left;優先根據position屬性來顯示,其次才根據奇數偶數來顯示,如下:

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

介面返回了的寬高,那麼我們直接累加的高度,就可以比較兩欄的高度,得出高度差。

如果較高的一邊的minh比兩欄高度的差值threshold小,即minh < threshold,那麼minh就需要移動

這種方式在拿到資料的同時,我們就可以知道某個元素是否需要移動。處理完資料後馬上渲染到檢視層。

這種方法當然是最省心的,但是介面也有可能不返回的寬高,於是就要用第2種方法了。

2. 介面不返回的寬高,在load事件取得寬高

監聽的load事件,獲得的寬高,在最後一張load完之後,用boundingclientrect測量兩欄的高度,得出高度差。

這種方法則必須在載入完,再測量某個元素是否需要移動,元素移動會比較明顯。

小程式瀑布流效果,解決左右兩邊高度差距過大的問題

想要實現瀑布流的布局效果,並且是按照從左到右順序顯示的話,css布局方式暫時還不能滿足我們的需求。參考小紅書的瀑布流效果,小紅書是分左右兩欄的,按照奇數偶數來顯示就可以。但是問題來了,隨著每個元素高度的不確定性,很大機率會出現左右兩欄高度相差大的問題。解決方法 要解決這個問題,我們要找出導致每個元素...

小程式瀑布流效果,解決左右兩邊高度差距過大的問題

想要實現瀑布流的布局效果,並且是按照從左到右順序顯示的話,css布局方式暫時還不能滿足我們的需求。參考小紅書的瀑布流效果,小紅書是分左右兩欄的,按照奇數偶數來顯示就可以。但是問題來了,隨著每個元素高度的不確定性,很大機率會出現左右兩欄高度相差大的問題。解決方法 要解決這個問題,我們要找出導致每個元素...

小程式瀑布流實現

實現思路 把分成兩排,建立兩個陣列,計算總數組中的寬高,對比上乙個和當前的高度,低的就給另乙個陣列新增。效果圖 上 miniprogram pages find index.js var util require utils util.js var userinfo,shang height 0 c...