2020-12-24 技术

前端瀑布流布局

前端实现瀑布流

方法一

css实现

.wapper{
  column-count: 4;
  column-gap: 1em;
}

存在的问题：只能实现竖向布局，一般不能满足业务需求

方法二

js动态规划实现，现两行布局的页面需对列表list实现瀑布流，实现：以vue为例

<div class="container">
  <div class="left">
    <template v-for="item,index in list" :key="index">
      <div class="card" v-if="index%2==0"></div>
    </template>
  </div>
  <div class="right">
    <template v-for="item,index in list" :key="index">
      <div class="card" v-if="index%2==1"></div>
    </template>
  </div>
</div>