資訊專欄INFORMATION COLUMN
摘要：參考小紅書的瀑布流效果，小紅書是分左右兩欄的，按照奇數(shù)偶數(shù)來顯示就可以。但是問題來了，隨著每個元素高度的不確定性，很大幾率會出現(xiàn)左右兩欄高度相差大的問題。
想要實現(xiàn)瀑布流的布局效果，并且是按照從左到右順序顯示的話，css布局方式暫時還不能滿足我們的需求。參考小紅書的瀑布流效果，小紅書是分左右兩欄的，按照奇數(shù)偶數(shù)來顯示就可以。
但是問題來了，隨著每個元素高度的不確定性，很大幾率會出現(xiàn)左右兩欄高度相差大的問題。
解決方法：
要解決這個問題，我們要找出導(dǎo)致每個元素的高度不同的原因，一般是圖片的高度，也可能是根據(jù)條件顯示的某些區(qū)域，建議只有圖片的高度不同，其它部分的高度保持不變，這會使得我們的計算變得簡單。
大概思路，取得左右兩欄的高度，計算左右兩欄的高請輸入代碼度差值，移動兩欄差值threshold的2分之1，如圖：
上面是理想的狀態(tài)，但是我們不可能切開元素，我們要知道高度高的一邊的是否有符合移動的元素，如果高度高的那欄中高度最小的元素minH 小于 差值threshold，那么我們可以移動，可以取長邊某個與差值的二分之一高度最接近的一個元素minH(一般是高度最小的那個，也可以取巧地移動高度最小的一個)。如果高度最小的元素比差值還大，則不需要移動。
那么怎么移動，默認(rèn)給元素一個屬性position，值為center，如果該元素要移動到左邊，那么給該元素一個屬性：position:left;優(yōu)先根據(jù)position屬性來顯示，其次才根據(jù)奇數(shù)偶數(shù)來顯示，如下：
至此，高度相差較大的問題就可以解決了。
我們?nèi)绾斡嬎銉蓹诘母叨饶兀?/b>重點是獲取圖片的寬高，我們就可以知道兩欄的高度，這里分兩種情況：
1. 接口返回圖片的寬高
接口返回了圖片的寬高，那么我們直接累加圖片的高度，就可以比較兩欄的高度，得出高度差。
如果較高的一邊的minH比兩欄高度的差值threshold小，即minH < threshold,那么minH就需要移動
這種方式在拿到數(shù)據(jù)的同時，我們就可以知道某個元素是否需要移動。處理完數(shù)據(jù)后馬上渲染到視圖層。
這種方法當(dāng)然是最省心的，但是接口也有可能不返回圖片的寬高，于是就要用第2種方法了。
2. 接口不返回圖片的寬高，在圖片load事件取得圖片寬高
監(jiān)聽圖片的load事件，獲得圖片的寬高，在最后一張圖片load完之后，用boundingClientRect測量兩欄的高度，得出高度差。
這種方法則必須在圖片加載完，再測量某個元素是否需要移動，元素移動會比較明顯。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/53679.html
摘要：參考小紅書的瀑布流效果，小紅書是分左右兩欄的，按照奇數(shù)偶數(shù)來顯示就可以。但是問題來了，隨著每個元素高度的不確定性，很大幾率會出現(xiàn)左右兩欄高度相差大的問題。 想要實現(xiàn)瀑布流的布局效果，并且是按照從左到右順序顯示的話，css布局方式暫時還不能滿足我們的需求。參考小紅書的瀑布流效果，小紅書是分左右兩欄的，按照奇數(shù)偶數(shù)來顯示就可以。 ...
摘要：參考小紅書的瀑布流效果，小紅書是分左右兩欄的，按照奇數(shù)偶數(shù)來顯示就可以。但是問題來了，隨著每個元素高度的不確定性，很大幾率會出現(xiàn)左右兩欄高度相差大的問題。 想要實現(xiàn)瀑布流的布局效果，并且是按照從左到右順序顯示的話，css布局方式暫時還不能滿足我們的需求。參考小紅書的瀑布流效果，小紅書是分左右兩欄的，按照奇數(shù)偶數(shù)來顯示就可以。 ...
摘要：使用實現(xiàn)瀑布流并不實用，因為實現(xiàn)的瀑布流都是以列來排列的，這里記錄下用實現(xiàn)瀑布流，以及微信小程序中使用左右兩列來實現(xiàn)瀑布流效果圖原生實現(xiàn)瀑布流文件圖片可以自己找點替換下就可以了文件添加陰影的時候，加上會顯得更加有點懸浮感文件計算圖片列數(shù) 使用css實現(xiàn)瀑布流并不實用，因為css實現(xiàn)的瀑布流都是以列來排列的，這里記錄下用js實現(xiàn)瀑布流，以及微信小程序中使用左右兩列來實現(xiàn)瀑布流 1.效果圖...
閱讀 4233·2021-09-26 10:17
閱讀 877·2021-09-22 15:02
閱讀 3450·2021-09-06 15:00
閱讀 1059·2021-07-25 16:52
閱讀 2740·2019-08-29 16:16
閱讀 2519·2019-08-29 13:25
閱讀 1595·2019-08-26 13:51
閱讀 2188·2019-08-26 10:58
