flex如何分散均匀布局(先竖向,在横向)?

背景:之前写的一款书签管理扩展,几乎全部功能都已完成。
现在还存在一个跟预期不符的遗留问题,所以在此请教~

具体问题

一个目录下有许多书签,我想让他们先竖向、再横向均匀分布。
比如6个书签,按5列显示:

期待的效果
一 二 三 四 五(列)
① ③ ④ ⑤ ⑥

现在的效果
一 二 三 四 五(列)
① ③ ⑤
② ④ ⑥

后面就空起了两列...

问题说明

  1. 目前书签内容布局采用的是 flex 布局(flex-direction: column),
    然后通过改变 container 的高度控制行数
  2. 支持书签的删除、新增操作,所以不考虑在3、4、5、6后填补空白单元
  3. 支持快捷键(比如:上下左右),改的时候要考虑这个

Demo:https://plnkr.co/edit/kkIAIf6...

不知道有没有代价不大的实现方法?

阅读 2.5k
2 个回答
✓ 已被采纳新手上路,请多包涵

感谢前面朋友的回答,此问题现已解决。

解决方法:
通过 css 选择器 an+b 给选中元素增加一个 margin-bottom: 1px;
而 a,b 通过总条数和列数计算可得

纯 html 是我没想到的。

依靠布局肯定是实现不了了,我们来推导一下,看看有没有规律

// length: 5 // 1 == 1 2 == 2
一 二 三 四 五(行)
① ② ③ ④ ⑤
// length: 7 // 1 == 1 2 == 6 3 == 2 4 == 7
一 二 三 四 五(行)
① ③ ⑤ ⑥ ⑦
② ④
// length: 13 // 1 == 1 2 == 6 3 == 11 4 == 2
一 二 三 四 五(行)
① ④ ⑦ ⑩ ②
② ⑤ ⑧ ① ③
③ ⑥ ⑨

接下来分析应该有几行(x = Math.ceil(length / 5)),最后一行应该有几个(y = length % 5)

最后就是小于 y 列的时候,x 次一个换行,大于的时候 x-1 次一个换行。

感觉还是 vue 计算起来比较简单。这样模拟瀑布流,做个计算列就完事了

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题