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

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

【技术实现步骤摘要】
一种基于可视化拖拉拽布局转瀑布流布局方法及系统


[0001]本专利技术涉及页面显示
，尤其涉及一种基于可视化拖拉拽布局转瀑布流布局方法及系统。

技术介绍

[0002]前端低代码运用越来越多。低代码离不开拖拉拽的布局，诸如市场一些比较好的产品的布局，大多也都是一些绝对定位的布局，也有一些产品是通过grid布局。
[0003]但是上述布局均存在一些问题，如绝对定位布局由于容器的垂直位置固定，容器内的内容过多的情况下，存在不能延伸容器的高度，否则会出现遮挡的情况。Grid布局因网格本身的因素导致同一行格子高度一起被影响。
[0004]现有一些布局也有采用瀑布流布局，但是现有的瀑布流布局在渲染前需要做特定的多栏划分算法；如公开号为CN110673912A的专利公开了一种实现响应式瀑布流布局的方法，包括：S3：预插入至少一个列容器；S4：获得当前所述列容器中高度最小的列容器；S5：将待插入元素插入到所述高度最小的列容器中。上述专利虽然可以实现自定义布局，但是在渲染前依然需要做特定的多栏划分算法。
[0005]针对上述技术问题，本专利技术提供一种基于可视化拖拉拽布局转瀑布流布局方法及系统。

技术实现思路

[0006]本专利技术的目的是针对现有技术的缺陷，提供了一种基于可视化拖拉拽布局转瀑布流布局方法及系统，将有定位、宽高标识的数据转化成瀑布流布局，将有位置关系的划分为同一栏，在同栏中可以无限新增，从而实现无限加载，无限滚动。同时数据中的高度都转化成了每个元素最小高度，这样元素内的内容变多，元素高度也会延伸。
[0007]为了实现以上目的，本专利技术采用以下技术方案：一种基于可视化拖拉拽布局转瀑布流布局方法，包括：S1.获取与容器相关的描述数据；其中，描述数据包括每个容器水平方向的位置、每个容器垂直方向的位置、每个容器的宽度、每个容器的高度；S2.按照从左到右的方式将容器相关的描述数据分成水平区域集合；S3.根据水平区域集合计算瀑布流布局中所需要的栏数；S4.根据得到的栏数计算相邻两个栏之间的间隔，得到所有栏内的容器；S5.根据得到的所有栏内的容器以及每个容器的宽度、每个容器的高度生成瀑布流布局。
[0008]进一步的，所述步骤S2之前还包括：计算所有去重后容器水平方向的起始位置集合，表示为：SL={ c1, c2, c3..., c
m }其中，SL表示所有去重后容器水平方向的起始位置集合；c
m
表示去重后容器在水
平方向的起始位置；m表示去重后容器水平方向的起始位置的个数。
[0009]进一步的，所述步骤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表示每个容器水平方向的位置。
[0010]进一步的，所述步骤S3之前还包括：计算与任意一个容器相交的水平方向的起始位置组成的集合，表示为：SIL={z|o
x
<z<o
x+w
, z∈SL}其中，SIL表示与任意一个容器相交的水平方向位置组成的集合；z表示处于容器之间的栏。
[0011]进一步的，所述步骤S3之前还包括：计算不与容器相交的水平方向起始位置的正向排序集合，表示为：SWL={t|t
∉
SIL,t∈SL}其中，SWL表示不与容器相交的水平方向位置的正向排序集合；t表示处于所有容器之外的栏。
[0012]进一步的，所述步骤S3中计算瀑布流布局中所需要的栏数，表示为：SLR={[t0, t1], [t1, t2]...,[t
k
‑1, t
k
]}其中，SLR表示所需要的栏数集合；k表示SWL中的容器的个数；k
i
表示1到k中的任意一值；t
ki
表示SWL中任意一个容器；[t
k
‑1, t
k
]表示相邻两个容器组成的一栏。
[0013]进一步的，所述步骤S4中根据得到的栏数计算相邻两个栏之间的间隔，表示为：t
ki
‑
t
ki
‑1。
[0014]进一步的，所述步骤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
表示任意一栏中容器的宽度。
[0015]所有栏内的容器集合，表示为：SLROS={y|y∈SLRO}其中，SLROS表示所有栏内的容器集合；y表示每个容器垂直方向的位置。
[0016]进一步的，所述步骤S5中每个容器的高度h为最小高度。
[0017]相应的，还提供一种可视化拖拉拽布局转瀑布流布局系统，包括：获取模块，用于获取与容器相关的描述数据；其中，描述数据包括每个容器水平方向的位置、每个容器垂直方向的位置、每个容器的宽度、每个容器的高度；集合模块，用于按照从左到右的方式将容器相关的描述数据分成水平区域集合；第一计算模块，用于根据水平区域集合计算瀑布流布局中所需要的栏数；第二计算模块，用于根据得到的栏数计算相邻两个栏之间的间隔，得到所有栏内
的容器；生成模块，用于根据得到的所有栏内的容器以及每个容器的宽度、每个容器的高度生成瀑布流布局。
[0018]与现有技术相比，本专利技术具有以下有益效果：1、适应移动端：可以在各种端使用，不局限于只能使用在固定高度的大屏，或者固定高度的PC端，可以根据容器的内容多或少自适应高度。可以用在固定高度的大屏，也可以用在不固定高度的手机端、pc端。
[0019]2、扩展性更高：布局是布局，内容是内容，不会因为换了个组件（高度不一样了）就需要重新去改变容器的高度。
[0020]3、瀑布流布局端优势：支持无限滚动新增内容，实现定宽不定高的动态布局。
[0021]4、通过拖拉本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种基于可视化拖拉拽布局转瀑布流布局方法，其特征在于，包括：S1.获取与容器相关的描述数据；其中，描述数据包括每个容器水平方向的位置、每个容器垂直方向的位置、每个容器的宽度、每个容器的高度；S2.按照从左到右的方式将容器相关的描述数据分成水平区域集合；S3.根据水平区域集合计算瀑布流布局中所需要的栏数；S4.根据得到的栏数计算相邻两个栏之间的间隔，得到所有栏内的容器；S5.根据得到的所有栏内的容器以及每个容器的宽度、每个容器的高度生成瀑布流布局。2.根据权利要求1所述的一种基于可视化拖拉拽布局转瀑布流布局方法，其特征在于，所述步骤S2之前还包括：计算所有去重后容器水平方向的起始位置集合，表示为：SL={ c1, c2, c3..., 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所...

【专利技术属性】
技术研发人员：尹皓，沈益跑，周祥，
申请(专利权)人：杭州数智政通科技有限公司，
类型：发明
国别省市：