因为第一次页面加载的时候显示不正常，之后切换页面就显示的跟预期一样

wxml

  <!-- js高度计算瀑布流  -->
  <view class="left" id="left-box">
    <view wx:for="{{leftList}}" class="item" wx:key="text">
      <image class="item-nail" src="{{item.nail}}" mode="widthFix"></image>
      <view class="item-text">推文{{item.text}}</view>
    </view>
  </view>
  <view class="right" id="right-box">
    <view wx:for="{{rightList}}" class="item" wx:key="text">
      <image class="item-nail" src="{{item.nail}}" mode="widthFix"></image>
      <view class="item-text">推文{{item.text}}</view>
    </view>
  </view>
</view>

js

waterfall(arr, index = 0) {
    if (arr.length <= index) {
      return
    }
    const query = wx.createSelectorQuery().in(this)
    query.select('#left-box').boundingClientRect()
    query.select('#right-box').boundingClientRect()
    query.exec(rects => {
      console.log('eee', rects)
      if ( rects[0].height <= rects[1].height ) {
        this.setData({
          leftList: this.data.leftList.concat([arr[index]])
        })
      } else {
        this.setData({
          rightList: this.data.rightList.concat([arr[index]])
        })
      }
      wx.nextTick(() => {
        this.waterfall(arr, ++index) 
      })
    })
  },

第一次 1，2 ，4，3…

之后1，2，3，4…正常了

为什么呀？，怎么规避第一次即第一次onload 进入出现的问题呢?