javascript - 数据渲染如何平行排列，不要重叠，如图所示，求大佬指导？

Question

卡车动态向右移动，全程划分100格，一格为1%，k35和k121都处于35%那格，“客户”要求让位置相同的卡车不要堆起来，让它们平行并排。图中暂时只有35%那个出现重叠，卡车多的时候有可能出现多处重叠，比如0%，34%，36%，100%等格也有可能重叠。我没思路，不知道怎么下手，求大佬们指导！

前端HTML：

                    <div class="truck" v-for="(num, inx) in 100" :key="inx">                      <div v-for="(empty, index) in arraData.emptyList" :key="index">                        <div v-if="Number(empty.percentage) >= inx && Number(empty.percentage) <= (inx + 1)">                          <div class="carNumber">{{ empty.name }}</div>                          <img class="emptyImg" src="../../assets/dispatch/kuangche-null.png" />                        </div>                      </div>                    </div>

后端接口数据：

let arraData = {  emptyList: [    {      name: 'k35',      percentage: '35%'    },    {      name: 'k121',      percentage: '35%'    }  ],  heavyList: []}

客户想要的结果是所有卡车平行排列，不要有堆叠

Answer 1

先修改一下数据结构, 修改为这种的:

  let arr = [    {      percentage: "35%",      childen: [        {          name: "k35",          percentage: "35%",        },        {          name: "k121",          percentage: "35%",        },      ],    },  ];

转换方式:

let emptyList = [  {    name: "k35",    percentage: "35%",  },  {    name: "k121",    percentage: "35%",  },  {    name: "k111",    percentage: "37%",  }];let arr = [];emptyList.forEach(item => {  let existingItem = arr.find(element => element.percentage === item.percentage);  if(existingItem) {    existingItem.children.push({ name: item.name, percentage: item.percentage });  } else {    arr.push({      percentage: item.percentage,      children: [{ name: item.name, percentage: item.percentage }]    });  }});

然后根据percentage生成放img位置的div, 比如放下35%位置, 然后div 里面根据childen遍历生成img