HTML 高度堆叠的排列方式

[starryiu]

我也不知道这种排列叫什么名字，暂且叫它高度堆叠的排列方式，简单来说就是宽度固定，卡片高度不固定，哪一列最短就将卡片放到那列。

要实现的效果

理解

一开始我想直接使用 flex 布局完成，然而没那么简单，使用 flex 布局当高度不同时会自动跳至下一行。

我看了下别人是使用的 position:absoulte 实现的，不过个人觉得有点复杂了，主要是绝对定位会使内容脱离文档流，无法获取最短的那一列的高度。

最终我使用的是 float 完成的。

实现代码

这里就不放代码了，可以点以下链接前往stackblitz查看。

实现链接

vue react angular 的实现方式

现在很多框架不推荐直接操作dom，不过可以判断卡片内的字体长度或列表长度的方式来决定排到那一列。

  formatTodoList: any[] = [[], []];
  changeFormatTodoList() {
    if (this.todoList.length === 0) {
      return;
    }
    this.formatTodoList = [[], []];
    let listOneTodoNumber = 0;
    let listTwoTodoNumber = 0;
    this.todoList.map((todo) => {
      if (listOneTodoNumber <= listTwoTodoNumber) {
        this.formatTodoList[0].push(todo);
        listOneTodoNumber +=
          this.formatTodoList[0][this.formatTodoList[0].length - 1].todos
            .length;
      } else {
        this.formatTodoList[1].push(todo);
        listTwoTodoNumber +=
          this.formatTodoList[1][this.formatTodoList[1].length - 1].todos
            .length;
      }
    });
  }