利用vue-waterfall做瀑布流的问题？

Question

我用vue-waterfall做瀑布流布局，希望两列布局，两列都紧靠屏幕两边，中间留出空白。上代码：

    <waterfall :line-gap='screenW'>
      <!-- each component is wrapped by a waterfall slot -->
      <waterfall-slot
        v-for="(video, index) in videoList"
        class='items'
        :width='screenW'
        :height='video.height * screenW / video.width + 40'
        :order='index'
        :key='video.auid'
      >
        <img :src='video.coverurl' alt="">
        <div class='user-info-box'>
          <img class='userlogo' :src='video.logourl' alt="">
          <span class='userName'>{{ video.username }}</span>
        </div>
      </waterfall-slot>
    </waterfall>
    
    data () {
        return {
          screenW: window.screen.width * 0.49
        }
    }
    
    这样做出来是两列紧靠在一起，居左，屏幕右边留白了
    

然后我给index%2===0的加了marginLeft希望把右边的顶过去，才想起来在左边的index不一定是奇数，请问大神我应该咋办

Answer 1

可以结合负边距

Answer 2

可以看看这个基于Vue的瀑布流组件: https://github.com/Rise-Devin...
DEMO
GITHUB
1.数据绑定,宽度自适应(适用于上拉加载更多)
2.自定义程度高
3.使用极为简便,适用于PC/移动端
4.提供resize(强制刷新布局-适用于下拉刷新)/mix(重排) API，一般情况下不需要用到
5.后期将持续更新，提供animation（过渡动画）