这种圆圈+文字的布局如何实现？

2019-08-13 14:31:39 +08:00
 waiaan

不用 D3 等库，谢谢。

圆圈和文字的数量不固定。

3641 次点击
所在节点    JavaScript
8 条回复
jjplay
2019-08-13 15:12:33 +08:00
https://www.highcharts.com.cn/demo/highcharts/packed-bubble
waiaan
2019-08-13 15:23:09 +08:00
@jjplay 如果不引用第三方库，有什么思路吗？
VDimos
2019-08-13 15:24:43 +08:00
Canvas 一把梭
jjplay
2019-08-13 15:34:14 +08:00
就直接写个元素，border-radius 设为圆圈，display inline-block，让它自个儿靠左，谁超过父元素宽度了就自己换行
waiaan
2019-08-13 16:17:09 +08:00
@jjplay 那不会导致左边一列都是对齐的？
jjplay
2019-08-13 16:40:06 +08:00
那就居中对齐啊朋友，做开发就是要有灵活想法，尤其是前端 奇技淫巧待你去研究
Zenyk
2019-08-14 10:18:51 +08:00
flex 布局 配合 flex-wrap: wrap
waiaan
2019-08-16 15:55:49 +08:00
@Zenyk
@jjplay
谢谢。
不过这样元素排列不够紧致，会出现比较大的空隙。

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/591498

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX