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

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

<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>

可是問題來了，隨着每一個元素高度的不肯定性，很大概率會出現左右兩欄高度相差大的問題。

解決方法：
要解決這個問題，咱們要找出致使每一個元素的高度不一樣的緣由，通常是圖片的高度，也多是根據條件顯示的某些區域，建議只有圖片的高度不一樣，其它部分的高度保持不變，這會使得咱們的計算變得簡單。
大概思路，取得左右兩欄的高度，計算左右兩欄的高請輸入代碼度差值，移動兩欄差值threshold的2分之1，如圖：

上面是理想的狀態，可是咱們不可能切開元素，咱們要知道高度高的一邊的是否有符合移動的元素，若是高度高的那欄中高度最小的元素minH 小於 差值threshold，那麼咱們能夠移動，能夠取長邊某個與差值的二分之一高度最接近的一個元素minH(通常是高度最小的那個，也能夠取巧地移動高度最小的一個)。若是高度最小的元素比差值還大，則不須要移動。

那麼怎麼移動，默認給元素一個屬性position，值爲center，若是該元素要移動到左邊，那麼給該元素一個屬性：position:left;優先根據position屬性來顯示，其次才根據奇數偶數來顯示，以下：

<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>

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

咱們如何計算兩欄的高度呢？

重點是獲取圖片的寬高，咱們就能夠知道兩欄的高度，這裏分兩種狀況：
1. 接口返回圖片的寬高
接口返回了圖片的寬高，那麼咱們直接累加圖片的高度，就能夠比較兩欄的高度，得出高度差。
若是較高的一邊的minH比兩欄高度的差值threshold小，即minH < threshold,那麼minH就須要移動
這種方式在拿到數據的同時，咱們就能夠知道某個元素是否須要移動。處理完數據後立刻渲染到視圖層。

這種方法固然是最省心的，可是接口也有可能不返回圖片的寬高，因而就要用第2種方法了。

2. 接口不返回圖片的寬高，在圖片load事件取得圖片寬高
監聽圖片的load事件，得到圖片的寬高，在最後一張圖片load完以後，用boundingClientRect測量兩欄的高度，得出高度差。
這種方法則必須在圖片加載完，再測量某個元素是否須要移動，元素移動會比較明顯。