流式布局-原子风格

一个有趣的流式布局

具体参考poki game的官网设计，看到的第一眼，就感觉到与游戏图标如此般配
并且自适应，于是就仿写吧，看了一下其逻辑，采用grid布局实现，但又估量了一下自己的grid水平，还是老老实实用js吧！

布局分析

• 父盒子与子盒子都与原子有一定比例关系，父盒子的宽度由可容纳原子决定
• grid 布局有填充的效果，但是你需要控制子元素的宽度和高度，面对大量的子元素需要借助js进行逻辑处理，然后向盒子中填充子元素
• 也可以通过绝对定位实现，控制每一个子元素的宽高以及定位，其排布逻辑实现后也可以借助grid进行布局

JS 实现

效果图

原理

父盒子

将父盒子数组化，其每一块区域都代表着数组中相应的一个值

子盒子
子盒子的合集为目标数组

目标数组在父盒子数组中值的体现 【1,2,3,1】

1	2	2	3	3	3
1	2	2	3	3	3
0	0	0	3	3	3
0	0	0	0	0	0

1代表盒子占据1块区域
2代表盒子占据22 即4块区域
3代表盒子占据33即9块区域

2占据4块，故其周围和本身应该存在4个2,3占据9块，同上

如果每行剩余的宽度不能容纳对应的目标值，则遍历后方数组，选出适合值并与之交换
如果没有适合值，那就跳过这一区域
例如【1,3,3】

1	3	3	3	0	0
0	3	3	3	0	0
0	3	3	3	0	0
3	3	3	0	0	0
3	3	3	0	0	0
3	3	3	0	0	0

子盒子的排布顺序：自上而下，自左至右

• 从每一行遍历，自左至右得出目标区域以及往后的连续区域（最多两个）是否都为空，连续空的数量表示可容纳的最大子盒子
• 一行遍历完成则进行下一行的遍历，寻找空值，并从目标数组中寻值进行填充，如果没有适合，那就进行下一行的遍历

Dom渲染
从上方逻辑填充的父盒子数组需要改进后才能作为渲染数组

• 每一块区域仅允许有一个代表值，即占满9块的3号盒子，在数组中的表示应该是一个3和8个0组成，
• 【1,3,2】的展示

1	3	0	0	2	0
0	0	0	0	0	0
0	0	0	0	0	0

• 0代表跳过，3代表应该渲染3号盒子，由于是绝对定位，其距离左方距离由其横坐标确定，纵坐标由其纵坐标确定
• 目标数组中应提供尽量多的1号盒子，以便填充空隙

代码 - git 地址

https://github.com/dong-tifi/fluid-layout