我们在做项目的时候，经常会遇到列表数据展示的需求，如下图：

看到这种需求就想到用flex布局方法会很方便：

然而··········这样写的话并不会像第一张图片那样展示，第二排的三个数据会平分整个宽度，

 

思路：所有我采用的方法就是改变原始数据，添加占位容器即添加多余的li元素

 

我用的是vue，其他框架可以借鉴思维，这是处理原始数据的方法

这是html数据的绑定

 

 

以下为完整代码：

<template>
  <div class="container">
    <div class="list-box" v-for="item in handleData" :key="item.id">
      <div class="title">
        <span class="introduce-text">{{item.type}}</span>
        <span class="more-text">
            <span>更多</span><i class="iconfont icon-down-trangle"></i>
          </span>
      </div>
      <ul class="list">
        <li class="item" v-for="list in item.list" :style="{backgroundColor:list.imagePath?'white':'rgba(246,246,246,1)'}">
          <template v-if="list.imagePath">
            <div class="type" v-show="list.type">新品</div>
            <img :src="list.imagePath" alt="img" class="img">
            <p class="name">{{list.name}}</p>
            <p class="desc">{{list.desc}}</p>
            <p class="price-box">
              <span class="new-price">￥{{list.newPrice}}</span>
              <span class="old-price">￥{{list.oldPrice}}</span>
            </p>
            <p class="btn-box">
              <button type="button" class="btn-shop">
                <i class="iconfont icon-gouwuche"></i>购买
              </button>
            </p>
          </template>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
 

  export default {
    name: "homeList",
    data() {
      return {
        listData: [
          {
            id: 1,
            type: "水果",
            list: [
              {
                id: 10,
                imagePath: require('@/assets/images/fruit1.jpg'),
                name: '苹果',
                desc: '好香好甜的苹果',
                oldPrice: 100,
                newPrice: 88,
                type: 1
              },
              {
                id: 11,
                imagePath: require('@/assets/images/fruit2.jpg'),
                name: '橘子',
                desc: '好香好甜的橘子',
                oldPrice: 66,
                newPrice: 58,
                type: 1
              },
              {
                id: 12,
                imagePath: require('@/assets/images/fruit3.jpg'),
                name: '火龙果',
                desc: '好香好甜的火龙果',
                oldPrice: 35,
                newPrice: 27,
                type: 1
              },
              {
                id: 13,
                imagePath: require('@/assets/images/fruit4.jpg'),
                name: '香蕉',
                desc: '好香好甜的香蕉',
                oldPrice: 74,
                newPrice: 68,
                type: 1
              },
              {
                id: 14,
                imagePath: require('@/assets/images/fruit5.jpg'),
                name: '葡萄',
                desc: '好香好甜的葡萄',
                oldPrice: 200,
                newPrice: 136,
                type: 0
              },
              {
                id: 15,
                imagePath: require('@/assets/images/fruit6.jpg'),
                name: '柠檬',
                desc: '好香好甜的柠檬',
                oldPrice: 55,
                newPrice: 47,
                type: 1
              },
              {
                id: 16,
                imagePath: require('@/assets/images/fruit7.jpg'),
                name: '草莓',
                desc: '好香好甜的草莓',
                oldPrice: 30,
                newPrice: 22,
                type: 0
              }
            ]
          },
          {
            id: 2,
            type: "牛奶",
            list: [
              {
                id: 20,
                imagePath: require('@/assets/images/mile1.jpg'),
                name: '蒙牛',
                desc: '好香好甜的蒙牛',
                oldPrice: 88,
                newPrice: 66,
                type: 1
              },
              {
                id: 21,
                imagePath: require('@/assets/images/mile2.jpg'),
                name: '伊利',
                desc: '好香好甜的伊利',
                oldPrice: 59,
                newPrice: 52,
                type: 0
              },
              {
                id: 22,
                imagePath: require('@/assets/images/mile3.jpg'),
                name: '金典',
                desc: '好香好甜的金典',
                oldPrice: 73,
                newPrice: 67,
                type: 1
              },
              {
                id: 23,
                imagePath: require('@/assets/images/mile4.jpg'),
                name: '安慕希',
                desc: '好香好甜的安慕希',
                oldPrice: 70,
                newPrice: 62,
                type: 1
              },
              {
                id: 24,
                imagePath: require('@/assets/images/mile5.jpg'),
                name: '哇哈哈',
                desc: '好香好甜的哇哈哈',
                oldPrice: 36,
                newPrice: 32,
                type: 0
              },
              {
                id: 25,
                imagePath: require('@/assets/images/mile6.jpg'),
                name: '阳光',
                desc: '好香好甜的阳光',
                oldPrice: 50,
                newPrice: 47,
                type: 1
              },
              {
                id: 26,
                imagePath: require('@/assets/images/mile7.jpg'),
                name: '加多宝',
                desc: '好香好甜的加多宝',
                oldPrice: 34,
                newPrice: 26,
                type: 0
              }
            ]
          },
        ]
      }
    },
    computed: {
      //判断数据是否是4的倍数，不是则填充缺省的
      handleData() {
        let data = this.listData;
        data.forEach((item, index) => {
          let list = item.list.length;
          let num = list % 4;
          if (num !== 0) {
            for (let i = 0; i < (4 - num); i++) {
              item.list.push({})
            }
          }
        });
        return this.listData;
      }
    }
  }
</script>

<style lang="stylus" scoped>
  .container
    width 12rem
    margin 0 auto
    font-size 0.14rem
    .list-box
      width 100%
      height 100%
      position relative
      .title
        padding 0.38rem 0 0.21rem 0
        .introduce-text
          font-size 0.18rem
          font-weight bold
          color #333
        .more-text
          float right
          font-size 0.14rem
          color #333
          span
            margin-right 0.05rem
          i
            font-size 0.18rem
            vertical-align middle
      .list
        display flex
        flex-direction row
        flex-wrap wrap
        justify-content space-between
        .item
          position relative
          width 2.85rem
          height 3.84rem
          background-color white
          text-align center
          margin-bottom 0.25rem
          .type
            position absolute
            right 0.1rem
            top 0.1rem
            background-color #FF6900
            font-size 0.12rem
            color white
            padding 0.01rem 0.05rem

          .img
            display block
            width 100%
            height 2.26rem
          .name
            color #333
            font-size 0.18rem
            margin-top 0.08rem
          .desc
            color #666
            font-size 0.16rem
            margin-top 0.08rem
          .price-box
            margin-top 0.08rem
            .new-price
              color #FF6900
              font-size 0.24rem
            .old-price
              color #666
              font-size 0.18rem
              text-decoration line-through
          .btn-box
            position absolute
            bottom 0
            width 100%
            .btn-shop
              width 100%
              height 0.4rem
              text-align center
              font-size 0.18rem
              color white
              background-color #FF6900
              border none
              i
                margin-right 0.15rem

</style>