CN115391700A - 一种基于可视化拖拉拽布局转瀑布流布局方法及系统 - Google Patents

Abstract

本发明公开了一种基于可视化拖拉拽布局转瀑布流布局方法及系统，其中涉及的方法包括：S1.获取与容器相关的描述数据；其中，描述数据包括每个容器水平方向的起始位置、每个容器垂直方向的位置、每个容器的宽度、每个容器的高度；S2.按照从左到右的方式将容器相关的描述数据分成水平区域集合；S3.根据水平区域集合计算瀑布流布局中所需要的栏数；S4.根据得到的栏数计算相邻两个栏之间的间隔，得到所有栏内的容器；S5.根据得到的所有栏内的容器以及每个容器的宽度、每个容器的高度生成瀑布流布局。

Description

一种基于可视化拖拉拽布局转瀑布流布局方法及系统

技术领域

本发明涉及页面显示技术领域，尤其涉及一种基于可视化拖拉拽布局转瀑布流布局方法及系统。

背景技术

前端低代码运用越来越多。低代码离不开拖拉拽的布局，诸如市场一些比较好的产品的布局，大多也都是一些绝对定位的布局，也有一些产品是通过grid布局。

但是上述布局均存在一些问题，如绝对定位布局由于容器的垂直位置固定，容器内的内容过多的情况下，存在不能延伸容器的高度，否则会出现遮挡的情况。Grid布局因网格本身的因素导致同一行格子高度一起被影响。

现有一些布局也有采用瀑布流布局，但是现有的瀑布流布局在渲染前需要做特定的多栏划分算法；如公开号为CN110673912A的专利公开了一种实现响应式瀑布流布局的方法，包括：S3：预插入至少一个列容器；S4：获得当前所述列容器中高度最小的列容器；S5：将待插入元素插入到所述高度最小的列容器中。上述专利虽然可以实现自定义布局，但是在渲染前依然需要做特定的多栏划分算法。

针对上述技术问题，本发明提供一种基于可视化拖拉拽布局转瀑布流布局方法及系统。

发明内容

本发明的目的是针对现有技术的缺陷，提供了一种基于可视化拖拉拽布局转瀑布流布局方法及系统，将有定位、宽高标识的数据转化成瀑布流布局，将有位置关系的划分为同一栏，在同栏中可以无限新增，从而实现无限加载，无限滚动。同时数据中的高度都转化成了每个元素最小高度，这样元素内的内容变多，元素高度也会延伸。

为了实现以上目的，本发明采用以下技术方案：

一种基于可视化拖拉拽布局转瀑布流布局方法，包括：

S1.获取与容器相关的描述数据；其中，描述数据包括每个容器水平方向的位置、每个容器垂直方向的位置、每个容器的宽度、每个容器的高度；

S2.按照从左到右的方式将容器相关的描述数据分成水平区域集合；

S3.根据水平区域集合计算瀑布流布局中所需要的栏数；

S4.根据得到的栏数计算相邻两个栏之间的间隔，得到所有栏内的容器；

S5.根据得到的所有栏内的容器以及每个容器的宽度、每个容器的高度生成瀑布流布局。

进一步的，所述步骤S2之前还包括：

计算所有去重后容器水平方向的起始位置集合，表示为：

SL={ c₁, c₂, c₃..., c_m }

其中，SL表示所有去重后容器水平方向的起始位置集合；c_m表示去重后容器在水平方向的起始位置；m表示去重后容器水平方向的起始位置的个数。

进一步的，所述步骤S2中的水平区域集合是通过每个容器水平方向的位置和每个容器的宽度组成的水平区域范围，表示为：

SR={[o_x,o_x+w]|o_x=x_i,o_x+w=x_i+w_i}

其中，SR表示水平区域集合；o_x表示水平区域中每个容器水平方向的起始位置；o_x+w表示水平区域中每个容器水平方向的结束位置；x_i表示水平区域中其中一个容器水平方向的起始位置；w_i表示水平区域中其中一个容器水平方向的结束位置；i表示任意一个容器；w表示每个容器的宽度；x表示每个容器水平方向的位置。

进一步的，所述步骤S3之前还包括：

计算与任意一个容器相交的水平方向的起始位置组成的集合，表示为：

SIL={z|o_x<z<o_x+w, z∈SL}

其中，SIL表示与任意一个容器相交的水平方向位置组成的集合；z表示处于容器之间的栏。

进一步的，所述步骤S3之前还包括：

计算不与容器相交的水平方向起始位置的正向排序集合，表示为：

SWL={t|t∉SIL,t∈SL}

其中，SWL表示不与容器相交的水平方向位置的正向排序集合；t表示处于所有容器之外的栏。

进一步的，所述步骤S3中计算瀑布流布局中所需要的栏数，表示为：

SLR={[t₀, t₁], [t₁, t₂]...,[t_k-1, t_k]}

其中，SLR表示所需要的栏数集合；k表示SWL中的容器的个数；k_i表示1到k中的任意一值；t_ki表示SWL中任意一个容器；[t_k-1, t_k]表示相邻两个容器组成的一栏。

进一步的，所述步骤S4中根据得到的栏数计算相邻两个栏之间的间隔，表示为：t_ki-t_ki-1。

进一步的，所述步骤S4中还包括根据容器水平方向的起始位置、容器的宽度，得到在SLR中[t_k-1, t_k]内的所有容器，表示为：

SLRO={o’|o’_x≥t_ki-1,o’_x+o’_w≥t_ki}

其中，SLRO表示任意一栏中所有容器的集合；o’表示任意一栏中的容器集合；o’_x表示任意一栏中容器水平方向的起始位置；O’_w表示任意一栏中容器的宽度。

所有栏内的容器集合，表示为：

SLROS={y|y∈SLRO}

其中，SLROS表示所有栏内的容器集合；y表示每个容器垂直方向的位置。

进一步的，所述步骤S5中每个容器的高度h为最小高度。

相应的，还提供一种可视化拖拉拽布局转瀑布流布局系统，包括：

获取模块，用于获取与容器相关的描述数据；其中，描述数据包括每个容器水平方向的位置、每个容器垂直方向的位置、每个容器的宽度、每个容器的高度；

集合模块，用于按照从左到右的方式将容器相关的描述数据分成水平区域集合；

第一计算模块，用于根据水平区域集合计算瀑布流布局中所需要的栏数；

第二计算模块，用于根据得到的栏数计算相邻两个栏之间的间隔，得到所有栏内的容器；

生成模块，用于根据得到的所有栏内的容器以及每个容器的宽度、每个容器的高度生成瀑布流布局。

与现有技术相比，本发明具有以下有益效果：

1、适应移动端：可以在各种端使用，不局限于只能使用在固定高度的大屏，或者固定高度的PC端，可以根据容器的内容多或少自适应高度。可以用在固定高度的大屏，也可以用在不固定高度的手机端、pc端。

2、扩展性更高：布局是布局，内容是内容，不会因为换了个组件（高度不一样了）就需要重新去改变容器的高度。

3、瀑布流布局端优势：支持无限滚动新增内容，实现定宽不定高的动态布局。

4、通过拖拉拽生成页面布局，又想要高度自适应的去渲染页面，让页面看着更自然，扩展性更好。

附图说明

图1是实施例一提供的一种基于可视化拖拉拽布局转瀑布流布局方法流程图；

图2是实施例一提供的一个瀑布流布局的示意图；

图3是实施例二提供的可视化页面中拉了有若干容器的页面示意图；

图4是实施例二提供的采用现有的绝对定位布局渲染示意图；

图5是实施例二提供的采用本方案转化过后的瀑布流布局渲染示意图。

具体实施方式

以下通过特定的具体实例说明本发明的实施方式，本领域技术人员可由本说明书所揭露的内容轻易地了解本发明的其他优点与功效。本发明还可以通过另外不同的具体实施方式加以实施或应用，本说明书中的各项细节也可以基于不同观点与应用，在没有背离本发明的精神下进行各种修饰或改变。需说明的是，在不冲突的情况下，以下实施例及实施例中的特征可以相互组合。

本发明的目的是针对现有技术的缺陷，提供了一种基于可视化拖拉拽布局转瀑布流布局方法及系统。

实施例一

本实施例提供的一种基于可视化拖拉拽布局转瀑布流布局方法，如图1所示，包括：

S1.获取与容器相关的描述数据；其中，描述数据包括每个容器水平方向的起始位置、每个容器垂直方向的位置、每个容器的宽度、每个容器的高度；

S2.按照从左到右的方式将容器相关的描述数据分成水平区域集合；

S3.根据水平区域集合计算瀑布流布局中所需要的栏数；

S4.根据得到的栏数计算相邻两个栏之间的间隔，得到所有栏内的容器；

S5.根据得到的所有栏内的容器以及每个容器的宽度、每个容器的高度生成瀑布流布局。

在步骤S1中，获取与容器相关的描述数据；其中，描述数据包括每个容器水平方向的起始位置、每个容器垂直方向的位置、每个容器的宽度、每个容器的高度。

通过拖拉拽生成或通过手写得到与容器相关的描述数据，将描述数据提供至所涉及的组件。描述数据如下：

{“x”：0，“y”：0，“w”：26，“h”：9，“i”：“1”}

{“x”：0，“y”：9，“w”：26，“h”：3，“i”：“2”}

{“x”：0，“y”：12，“w”：26，“h”：3，“i”：“3”}

{“x”：0，“y”：15，“w”：26，“h”：8，“i”：“4”}

{“x”：0，“y”：23，“w”：26，“h”：5，“i”：“5”}

{“x”：26，“y”：0，“w”：70，“h”：7，“i”：“7”}

……

其中，x表示每个容器水平方向的位置；y表示每个容器垂直方向的位置；w表示每个容器的宽度；h表示每个容器的高度；设共有n个容器，i表示1到n总任意一个容器。

如图2所示为所展示的一个瀑布流布局的示意图，其中垂直线x1到x10为每个容器的起始位置所组成的分割线。

设所有去重后容器水平方向的起始位置集合，即为了便于后续分割线的去重，表示为：

SL={ c₁, c₂, c₃..., c_m }

其中，SL表示为所有去重后容器水平方向的起始位置集合；c_m表示去重后容器在水平方向的起始位置，可以是百分比的值(如：3%)；可以是具体的像素值(如：300px)；也可以是预先设定好的格子数的其中一个格子（比如水平方向平均分了96个格子，其中一个载体元素宽度跨度是50-60，则此时c_m是50）；m表示去重后的个数；一个页面中有n个载体，每个载体都有一个水平方向的起始位置，记有n个起始位置，但是n个水平位置中值有相等的，所以SL为一个去重的水平位置值的集合。

在步骤S2中，按照从左到右的方式将容器相关的描述数据分成水平区域集合。

根据步骤S1中获取到每个容器水平方向的位置x、每个容器的宽度w，按照从左到右的方式将得到的数据分成水平区域集合；同时记录每个容器的水平区域数据。

水平区域集合为每个容器由起始位置和自身宽度所组成的水平区域范围，表示为：

SR={[o_x,o_x+w]|o_x=x_i,o_x+w=x_i+w_i}

其中，SR表示水平区域集合；o_x表示水平区域中每个容器水平方向的起始位置；o_x+w表示水平区域中每个容器水平方向的结束位置；x_i表示水平区域中其中一个容器水平方向的起始位置；w_i表示水平区域中其中一个容器水平方向的结束位置；i表示任意一个容器；w表示每个容器的宽度；x表示每个容器水平方向的位置。

从图2中可以看出每条分隔线在垂直方向与其他不是起始位置的容器会有相交，为了避免有重复的元素，则计算与任意一个容器相交的水平方向的起始位置（即分割线）组成的集合，表示为：

SIL={z|o_x<z<o_x+w, z∈SL}

其中，SIL表示与任意一个容器相交的水平方向位置组成的集合；z表示处于容器之间的栏。

根据得到的相交集合，即可计算得到不与容器相交的分割线的正向排序集合，表示为：

SWL={t|t∉SIL,t∈SL}

其中，SWL表示不与容器相交的水平方向位置的正向排序集合；t表示处于所有容器之外的栏。

在步骤S3中，根据水平区域集合计算瀑布流布局中所需要的栏数。

假设SWL中有k个容器，k_i为1到k中的任意一值，t_ki为SWL中任意一容器，SWL集合的相邻两个元素组成的为页面中的一栏。

本实施例定义的一栏是所有容器的x范围存在包含关系则全部归纳为一栏；如x1-x4之间就是一个栏，即这种相互之间起点到终点都有包含，就属于一栏。

瀑布流布局中所需要的栏数，表示为：

SLR={[t₀, t₁], [t₁, t₂]...,[t_k-1, t_k]}

其中，SLR表示所需要的栏数集合；[t_k-1, t_k]表示相邻两个容器组成的一栏。

在步骤S4中，根据得到的栏数计算相邻两个栏之间的间隔，得到所有栏内的容器。

相邻两个栏之间的间隔，表示为：t_ki-t_ki-1；如x4-x1就是这个栏的间隔区域值。

根据容器水平方向的起始位置x、容器的宽度w，得到在SLR中[t_k-1, t_k]内的所有容器，即首先要筛选出在任意一栏之间包含的所有容器，表示为：

SLRO={o’|o’x≥t_ki-1,o’x+o’w≥t_ki}

其中，SLRO表示任意一栏中所有容器的集合；o’表示任意一栏中的容器集合；o’_x表示任意一栏中容器水平方向的起始位置；O’_w表示任意一栏中容器的宽度。

根据得到的任意一栏中的所有容器之后，即可得到瀑布流布局中所有栏内的容器集合，表示为：

SLROS={y|y∈SLRO}

其中，SLROS表示所有栏内的容器集合。

在步骤S5中，根据得到的所有栏内的容器以及每个容器的宽度w、每个容器的高度h生成瀑布流布局。

将得到的集合SLROS在页面中进行循环渲染，将容器的高度h的值设置为最小高度(min-height)。每一个栏用flex布局，间距用flex中的gap，栏内使用换行布局，就能得到一个瀑布流布局的效果。新增的容器，只需要往对应的栏里加入即可。

瀑布流布局的特性是，划分好栏，同栏中的元素一直向下排列，栏与栏之间的元素相互不影响。此处用到的flex布局功能主要是在同栏中，将元素按照从上到下的方式排列，同时用到栏flex的gap属性，设置元素之间的外间距，这样会减少代码量，减少内联样式对浏览器造成的不必要开销。

在本实施例中，起始表达的就是一栏中的元素，栏也是页面的垂直方向。

与现有技术相比，本实施例具有以下有益效果：

1、适应移动端：可以在各种端使用，不局限于只能使用在固定高度的大屏，或者固定高度的PC端，可以根据容器的内容多或少自适应高度。可以用在固定高度的大屏，也可以用在不固定高度的手机端、pc端。

2、扩展性更高：布局是布局，内容是内容，不会因为换了个组件（高度不一样了）就需要重新去改变容器的高度。

3、瀑布流布局端优势：支持无限滚动新增内容，实现定宽不定高的动态布局。

4、通过拖拉拽生成页面布局，又想要高度自适应的去渲染页面，让页面看着更自然，扩展性更好。

相应的，还提供一种可视化拖拉拽布局转瀑布流布局系统，包括：

获取模块，用于获取与容器相关的描述数据；其中，描述数据包括每个容器水平方向的起始位置x、每个容器垂直方向的位置y、每个容器的宽度w、每个容器的高度h；

集合模块，用于按照从左到右的方式将容器相关的描述数据分成水平区域集合；

第一计算模块，用于根据水平区域集合计算瀑布流布局中所需要的栏数；

第二计算模块，用于根据得到的栏数计算相邻两个栏之间的间隔，得到所有栏内的容器；

生成模块，用于根据得到的所有栏内的容器以及每个容器的宽度w、每个容器的高度h生成瀑布流布局。

实施例二

本实施例提供的一种可视化拖拉拽布局转瀑布流布局方法与实施例一的不同之处在于：

通过可视化拖拉拽一个页面的时候来说明本方案的实际应用效果。

如图3所示为在可视化页面中拉了有若干容器的页面，每个容器内可以放置各类组件。

如图4所示为采用现有的绝对定位布局渲染，可以看到，传统的渲染方式，容器高度不会受到内容的影响，因为上下两个块的位置已经被固定了,高度变化会遮掩下面的内容。虽然采用grid布局能解决高度问题，但是一样会有新的问题，比如严格的行划分，不能实现同行不同高的搓位布局效果。

如图5所示为采用本方案转化过后的瀑布流布局，容器自身的属性并未被限制，高度会随着内容的增加而增加。这样就能保留浏览器盒模型元素的默认行为，也能保证原始的位置关联关系。

注意，上述仅为本发明的较佳实施例及所运用技术原理。本领域技术人员会理解，本发明不限于这里所述的特定实施例，对本领域技术人员来说能够进行各种明显的变化、重新调整和替代而不会脱离本发明的保护范围。因此，虽然通过以上实施例对本发明进行了较为详细的说明，但是本发明不仅仅限于以上实施例，在不脱离本发明构思的情况下，还可以包括更多其他等效实施例， 而本发明的范围由所附的权利要求范围决定。

Claims (10)

1.一种基于可视化拖拉拽布局转瀑布流布局方法，其特征在于，包括：

S1.获取与容器相关的描述数据；其中，描述数据包括每个容器水平方向的位置、每个容器垂直方向的位置、每个容器的宽度、每个容器的高度；

S2.按照从左到右的方式将容器相关的描述数据分成水平区域集合；

S3.根据水平区域集合计算瀑布流布局中所需要的栏数；

S4.根据得到的栏数计算相邻两个栏之间的间隔，得到所有栏内的容器；

S5.根据得到的所有栏内的容器以及每个容器的宽度、每个容器的高度生成瀑布流布局。

2.根据权利要求1所述的一种基于可视化拖拉拽布局转瀑布流布局方法，其特征在于，所述步骤S2之前还包括：

计算所有去重后容器水平方向的起始位置集合，表示为：

SL={ c₁, c₂, c₃..., c_m }

其中，SL表示所有去重后容器水平方向的起始位置集合；c_m表示去重后容器在水平方向的起始位置；m表示去重后容器水平方向的起始位置的个数。

3.根据权利要求2所述的一种基于可视化拖拉拽布局转瀑布流布局方法，其特征在于，所述步骤S2中的水平区域集合是通过每个容器水平方向的位置和每个容器的宽度组成的水平区域范围，表示为：

SR={[o_x,o_x+w]|o_x=x_i,o_x+w=x_i+w_i}

其中，SR表示水平区域集合；o_x表示水平区域中每个容器水平方向的起始位置；o_x+w表示水平区域中每个容器水平方向的结束位置；x_i表示水平区域中其中一个容器水平方向的起始位置；w_i表示水平区域中其中一个容器水平方向的结束位置；i表示任意一个容器；w表示每个容器的宽度；x表示每个容器水平方向的位置。

4.根据权利要求2所述的一种基于可视化拖拉拽布局转瀑布流布局方法，其特征在于，所述步骤S3之前还包括：

计算与任意一个容器相交的水平方向的起始位置组成的集合，表示为：

SIL={z|o_x<z<o_x+w, z∈SL}

其中，SIL表示与任意一个容器相交的水平方向位置组成的集合；z表示处于容器之间的栏。

5.根据权利要求4所述的一种基于可视化拖拉拽布局转瀑布流布局方法，其特征在于，所述步骤S3之前还包括：

计算不与容器相交的水平方向起始位置的正向排序集合，表示为：

SWL={t|t∉SIL,t∈SL}

其中，SWL表示不与容器相交的水平方向位置的正向排序集合；t表示处于所有容器之外的栏。

6.根据权利要求5所述的一种基于可视化拖拉拽布局转瀑布流布局方法，其特征在于，所述步骤S3中计算瀑布流布局中所需要的栏数，表示为：

SLR={[t₀, t₁], [t₁, t₂]...,[t_k-1, t_k]}

其中，SLR表示所需要的栏数集合；k表示SWL中的容器的个数；k_i表示1到k中的任意一值；t_ki表示SWL中任意一个容器；[t_k-1, t_k]表示相邻两个容器组成的一栏。

7.根据权利要求6所述的一种基于可视化拖拉拽布局转瀑布流布局方法，其特征在于，所述步骤S4中根据得到的栏数计算相邻两个栏之间的间隔，表示为：t_ki-t_ki-1。

8.根据权利要求7所述的一种基于可视化拖拉拽布局转瀑布流布局方法，其特征在于，所述步骤S4中还包括根据容器水平方向的起始位置、容器的宽度，得到在SLR中[t_k-1, t_k]内的所有容器，表示为：

SLRO={o’|o’_x≥t_ki-1,o’_x+o’_w≥t_ki}

其中，SLRO表示任意一栏中所有容器的集合；o’表示任意一栏中的容器集合；o’_x表示任意一栏中容器水平方向的起始位置；O’_w表示任意一栏中容器的宽度；

所有栏内的容器集合，表示为：

SLROS={y|y∈SLRO}

其中，SLROS表示所有栏内的容器集合；y表示每个容器垂直方向的位置。

9.根据权利要求1所述的一种基于可视化拖拉拽布局转瀑布流布局方法，其特征在于，所述步骤S5中每个容器的高度h为最小高度。

10.一种基于权利要求1-9任一项所述的一种可视化拖拉拽布局转瀑布流布局方法的系统，其特征在于，包括：

获取模块，用于获取与容器相关的描述数据；其中，描述数据包括每个容器水平方向的位置、每个容器垂直方向的位置、每个容器的宽度、每个容器的高度；

集合模块，用于按照从左到右的方式将容器相关的描述数据分成水平区域集合；

第一计算模块，用于根据水平区域集合计算瀑布流布局中所需要的栏数；

第二计算模块，用于根据得到的栏数计算相邻两个栏之间的间隔，得到所有栏内的容器；

生成模块，用于根据得到的所有栏内的容器以及每个容器的宽度、每个容器的高度生成瀑布流布局。

Images