想要實現瀑布流的布局效果，並且是按照從左到右順序顯示的話，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...