CN110673912A - 一种实现响应式瀑布流布局的方法及系统 - Google Patents

一种实现响应式瀑布流布局的方法及系统 Download PDF

Info

Publication number
CN110673912A
CN110673912A CN201910882657.8A CN201910882657A CN110673912A CN 110673912 A CN110673912 A CN 110673912A CN 201910882657 A CN201910882657 A CN 201910882657A CN 110673912 A CN110673912 A CN 110673912A
Authority
CN
China
Prior art keywords
waterfall flow
responsive
implementing
column
flow layout
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Withdrawn
Application number
CN201910882657.8A
Other languages
English (en)
Inventor
周晶
吴峰
郭伟
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Shanghai Yidianshikong Network Co Ltd
Original Assignee
Shanghai Yidianshikong Network Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Shanghai Yidianshikong Network Co Ltd filed Critical Shanghai Yidianshikong Network Co Ltd
Priority to CN201910882657.8A priority Critical patent/CN110673912A/zh
Publication of CN110673912A publication Critical patent/CN110673912A/zh
Withdrawn legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/14—Digital output to display device ; Cooperation and interconnection of the display device with other functional units

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Software Systems (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

一种实现响应式瀑布流布局的方法，包括：S3：预插入至少一个列容器；S4：获得当前所述列容器中高度最小的列容器；S5：将待插入元素插入到所述高度最小的列容器中。本申请所提供的实现响应式瀑布流布局的方法，算法思路简单，具备平台无关性，所有显示终端都可以基于此算法实现瀑布流式布局。并且支持响应式，用户可以根据具体场景完全自定义。

Description

一种实现响应式瀑布流布局的方法及系统
技术领域
本申请涉及页面显示领域，具体而言，涉及一种实现响应式瀑布流布局的方法及系统。
背景技术
瀑布流布局在一些富展示的信息流类UI界面中极常见，目前在WEB端没有兼容性良好的原生基于瀑布流的布局方案。本专利提出的方法具有平台无关性，不仅原理简单，且能在任意显示终端。
发明内容
本申请的主要目的在于提供一种实现响应式瀑布流布局的方法，包括：
S3：预插入至少一个列容器；
S4：获得当前所述列容器中高度最小的列容器；
S5：将待插入元素插入到所述高度最小的列容器中。
可选地，重复步骤S4及S5，直至所有待插入元素均插入到当前瀑布流中。
可选地，所述实现响应式瀑布流布局的方法还包括：
S1：计算当前瀑布流显示区域的宽度；
S2：将所述宽度匹配预设配置，根据匹配结果获得需展示的瀑布流列数。
可选地，当视点大于或等于0，且小于576px时，显示2列。
可选地，当视点大于或等于576，且小于750px时，显示3列。
可选地，当视点大于或等于750，且小于1024px时，显示6列。
根据本申请的另一个方面，还提供了一种分析大数据工作流调用关系的系统，包括：
第一插入模块，用于预插入至少一个列容器；
获取模块，用于获得当前所述列容器中高度最小的列容器；
第二插入模块，用于将待插入元素插入到所述高度最小的列容器中。
本申请还公开了一种计算机设备，包括存储器、处理器和存储在所述存储器内并能由所述处理器运行的计算机程序，所述处理器执行所述计算机程序时实现上述任一项所述的方法。
本申请还公开了一种计算机可读存储介质，非易失性可读存储介质，其内存储有计算机程序，所述计算机程序在由处理器执行时实现上述任一项所述的方法。
本申请还公开了一种计算机程序产品，包括计算机可读代码，当所述计算机可读代码由计算机设备执行时，导致所述计算机设备执行上述任一项所述的方法。
本申请所提供的实现响应式瀑布流布局的方法，算法思路简单，具备平台无关性，所有显示终端都可以基于此算法实现瀑布流式布局。并且支持响应式，用户可以根据具体场景完全自定义。
附图说明
构成本申请的一部分的附图用来提供对本申请的进一步理解，使得本申请的其它特征、目的和优点变得更明显。本申请的示意性实施例附图及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：
图1是根据本申请一个实施例的实现响应式瀑布流布局的方法的流程示意图；
图2是根据本申请一个实施例的计算机设备的示意图；以及
图3是根据本申请一个实施例的计算机可读存储介质的示意图。
具体实施方式
为了使本技术领域的人员更好地理解本申请方案，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分的实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本申请保护的范围。
需要说明的是，本申请的术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。
此外，术语“安装”、“设置”、“设有”、“连接”、“相连”、“套接”应做广义理解。例如，可以是固定连接，可拆卸连接，或整体式构造；可以是机械连接，或电连接；可以是直接相连，或者是通过中间媒介间接相连，又或者是两个装置、元件或组成部分之间内部的连通。对于本领域普通技术人员而言，可以根据具体情况理解上述术语在本申请中的具体含义。
需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互组合。下面将参考附图并结合实施例来详细说明本申请。
如图1所示，本申请一实施例提供了一种实现响应式瀑布流布局的方法，包括：
S3：预插入至少一个列容器；
S4：获得当前所述列容器中高度最小的列容器；
S5：将待插入元素插入到所述高度最小的列容器中。
在本申请一实施例中，重复步骤S4及S5，直至所有待插入元素均插入到当前瀑布流中。
在本申请一实施例中，所述实现响应式瀑布流布局的方法还包括：
S1：计算当前瀑布流显示区域的宽度；
S2：将所述宽度匹配预设配置，根据匹配结果获得需展示的瀑布流列数。
在本申请一实施例中，当视点大于或等于0，且小于576px时，显示2列。
在本申请一实施例中，当视点大于或等于576，且小于750px时，显示3列。
在本申请一实施例中，当视点大于或等于750，且小于1024px时，显示6列。
本申请还提供了一种分析大数据工作流调用关系的系统，包括：
第一插入模块，用于预插入至少一个列容器；
获取模块，用于获得当前所述列容器中高度最小的列容器；
第二插入模块，用于将待插入元素插入到所述高度最小的列容器中。
响应式多列可以根据用户需求自行配置，配置的格式根据编程语言自行约定，如(以下为描述性语言)：
0<＝viewport<576px时，显示2列
576<＝viewport<750时，显示3列
750<＝viewport<1024时，显示6列
...
当显示页面载入时，计算当前瀑布流显示区域的宽度，对用户设置的响应式配置进行匹配，得出当前页面需要展示的瀑布流的列数n，在容器中预插入n个column容器。如：
Figure BDA0002206348250000041
Figure BDA0002206348250000051
结束，此时实现了响应式瀑布流
瀑布流的实现：
假设每次加载10条新数据List，初始化时上述步骤2中的所有容器高度都为0
进行一次瀑布流所有列高度遍历，得出当前瀑布流列容器ColumnContainer中高度最小的那个列Cmin
循环读取List，将当前循环值插入Cmin,此时瀑布流中的最小列可能发生变化，重复1，同时进入循环的下一次迭代
结束，此时所有元素全部插入到瀑布流中
请参照图2，本申请还提供了一种计算机设备，包括存储器、处理器和存储在所述存储器内并能由所述处理器运行的计算机程序，所述处理器执行所述计算机程序时实现上述任一项所述的方法。
请参照图3，本申请还提供了一种计算机可读存储介质，非易失性可读存储介质，其内存储有计算机程序，所述计算机程序在由处理器执行时实现上述任一项所述的方法。
本申请还提供了一种计算机程序产品，包括计算机可读代码，当所述计算机可读代码由计算机设备执行时，导致所述计算机设备执行上述任一项所述的方法。
本申请所提供的实现响应式瀑布流布局的方法，算法思路简单，具备平台无关性，所有显示终端都可以基于此算法实现瀑布流式布局。并且支持响应式，用户可以根据具体场景完全自定义。
以上所述仅为本申请的优选实施例而已，并不用于限制本申请，对于本领域的技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本申请的保护范围之内。

Claims (10)

1.一种实现响应式瀑布流布局的方法，其特征在于，包括：
S3：预插入至少一个列容器；
S4：获得当前所述列容器中高度最小的列容器；
S5：将待插入元素插入到所述高度最小的列容器中。
2.根据权利要求1所述的实现响应式瀑布流布局的方法，其特征在于，重复步骤S4及S5，直至所有待插入元素均插入到当前瀑布流中。
3.根据权利要求2所述的实现响应式瀑布流布局的方法，其特征在于，所述实现响应式瀑布流布局的方法还包括：
S1：计算当前瀑布流显示区域的宽度；
S2：将所述宽度匹配预设配置，根据匹配结果获得需展示的瀑布流列数。
4.根据权利要求3所述的实现响应式瀑布流布局的方法，其特征在于，当视点大于或等于0，且小于576px时，显示2列。
5.根据权利要求4所述的实现响应式瀑布流布局的方法，其特征在于，当视点大于或等于576，且小于750px时，显示3列。
6.根据权利要求5所述的实现响应式瀑布流布局的方法，其特征在于，
当视点大于或等于750，且小于1024px时，显示6列。
7.一种分析大数据工作流调用关系的系统，其特征在于，包括：
第一插入模块，用于预插入至少一个列容器；
获取模块，用于获得当前所述列容器中高度最小的列容器；
第二插入模块，用于将待插入元素插入到所述高度最小的列容器中。
8.一种计算机设备，包括存储器、处理器和存储在所述存储器内并能由所述处理器运行的计算机程序，所述处理器执行所述计算机程序时实现如权利要求1-6任一项所述的方法。
9.一种计算机可读存储介质，非易失性可读存储介质，其内存储有计算机程序，所述计算机程序在由处理器执行时实现如权利要求1-6任一项所述的方法。
10.一种计算机程序产品，包括计算机可读代码，当所述计算机可读代码由计算机设备执行时，导致所述计算机设备执行如权利要求1-6任一项所述的方法。
CN201910882657.8A 2019-09-18 2019-09-18 一种实现响应式瀑布流布局的方法及系统 Withdrawn CN110673912A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201910882657.8A CN110673912A (zh) 2019-09-18 2019-09-18 一种实现响应式瀑布流布局的方法及系统

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201910882657.8A CN110673912A (zh) 2019-09-18 2019-09-18 一种实现响应式瀑布流布局的方法及系统

Publications (1)

Publication Number Publication Date
CN110673912A true CN110673912A (zh) 2020-01-10

Family

ID=69078162

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201910882657.8A Withdrawn CN110673912A (zh) 2019-09-18 2019-09-18 一种实现响应式瀑布流布局的方法及系统

Country Status (1)

Country Link
CN (1) CN110673912A (zh)

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114528063A (zh) * 2022-04-21 2022-05-24 苏州万店掌网络科技有限公司 一种页面显示方法、装置、设备及存储介质
CN115391700A (zh) * 2022-10-31 2022-11-25 杭州数智政通科技有限公司 一种基于可视化拖拉拽布局转瀑布流布局方法及系统

Cited By (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114528063A (zh) * 2022-04-21 2022-05-24 苏州万店掌网络科技有限公司 一种页面显示方法、装置、设备及存储介质
CN114528063B (zh) * 2022-04-21 2022-07-12 苏州万店掌网络科技有限公司 一种页面显示方法、装置、设备及存储介质
CN115391700A (zh) * 2022-10-31 2022-11-25 杭州数智政通科技有限公司 一种基于可视化拖拉拽布局转瀑布流布局方法及系统
CN115391700B (zh) * 2022-10-31 2023-03-14 杭州数智政通科技有限公司 一种基于可视化拖拉拽布局转瀑布流布局方法及系统

Similar Documents

Publication Publication Date Title
CN109375971B (zh) 页面的布局方法及装置、存储介质、电子装置
JP2014522048A (ja) 漢字構成方法および装置、文字構成方法および装置、ならびにフォントライブラリ構築方法
CN108154211A (zh) 二维码生成、业务处理方法、装置和设备以及二维码
CN103345388A (zh) 基于安卓操作系统的软件适应移动终端的方法及装置
CN110673912A (zh) 一种实现响应式瀑布流布局的方法及系统
CN104820589A (zh) 一种动态适配网页的方法及其装置
CN109992188B (zh) 一种iOS移动端文本滚动显示的实现方法及装置
CN103034404A (zh) 一种待办事项展示方法和展示系统
CN102662666A (zh) 一种界面菜单的创建方法及装置
CN108874808A (zh) 一种页面元素联动方法、装置及服务器
CN105094584B (zh) 视图缩放处理方法和视图缩放处理装置
CN108881997A (zh) 动画文件生成及播放方法、装置和系统
KR101953503B1 (ko) Dpi 적응 방법 및 전자 디바이스
CN109271607A (zh) 用户页面布局检测方法和装置、电子设备
CN112329412B (zh) 动态控制基于前端技术表格列的方法及装置
CN108304118B (zh) 截图方法及装置
CN113254131A (zh) 一种页面背景展示方法及装置
CN113343136B (zh) 一种展示信息的方法及装置
CN115357696A (zh) 基于组件的动态图表看板展示方法及相关设备
CN102982086B (zh) 一种展现滚动列表的系统和方法
CN107835463A (zh) 一种图片展示的自定义方法、系统及机顶盒
CN110990097B (zh) 一种ui界面生成方法、存储介质及智能终端
CN114219873A (zh) 图表的绘制方法、装置、电子设备及计算机存储介质
CN103218357A (zh) 页面的设置方法及装置
CN109558927A (zh) 一种艺术二维码生成方法和装置

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
WW01 Invention patent application withdrawn after publication

Application publication date: 20200110

WW01 Invention patent application withdrawn after publication