一种页面布局信息确定方法及装置与流程

1.本发明涉及数据处理技术领域，具体涉及一种页面布局信息确定方法及装置。


背景技术：

2.在常见的后台管理系统中，卡片组件即卡片，是一种常见的展示需求，但是这类需求很难实现较好的展示效果，主要原因包括：pc分辨率不统一，用户在进入页面时候，由于页面宽度不一致，而且用户在访问页面的时候，有时会改变页面宽度来做一些其他工作，所以，在页面布局的时候不光要考虑到首屏宽度，还要考虑到页面宽度动态变化的情况。
3.现有技术通过定性增加或者减少卡片个数，以及对卡片宽度进行缩放的方式适应页面宽度动态变化的情况，但是，页面布局方式的精细化程度不够，使得页面布局展示效果较差，例如容易出现过多的页面留白等。


技术实现要素：

4.针对现有技术中的问题，本发明实施例提供一种页面布局信息确定方法及装置，能够至少部分地解决现有技术中存在的问题。
5.一方面，本发明提出一种页面布局信息确定方法，包括：
6.若监听到页面宽度发生变化，则计算初始页面布局信息；
7.根据变化后的页面宽度和所述初始页面布局信息，确定与预配置的页面布局信息计算方式对应变化后的页面布局信息。
8.其中，所述初始页面布局信息包括初始卡片外边距和初始卡片个数；相应的，所述根据变化后的页面宽度和所述初始页面布局信息，确定与预配置的页面布局信息计算方式对应变化后的页面布局信息，包括：
9.根据所述变化后的页面宽度、所述初始卡片外边距和所述初始卡片个数，计算所述页面布局信息中的卡片宽度。
10.其中，所述初始页面布局信息包括初始卡片宽度和初始卡片个数；相应的，所述根据变化后的页面宽度和所述初始页面布局信息，确定与预配置的页面布局信息计算方式对应变化后的页面布局信息，包括：
11.根据所述变化后的页面宽度、所述初始卡片宽度和所述初始卡片个数，计算所述页面布局信息中的卡片外边距。
12.其中，所述初始页面布局信息包括初始卡片宽度、初始卡片个数和初始卡片外边距；相应的，所述根据变化后的页面宽度和所述初始页面布局信息，确定与预配置的页面布局信息计算方式对应变化后的页面布局信息，包括：
13.根据所述变化后的页面宽度、所述初始卡片宽度、所述初始卡片个数和所述初始卡片外边距，计算所述页面布局信息中的页面内边距。
14.其中，所述页面布局信息包括卡片宽度、卡片外边距和卡片个数；相应的，所述页面布局信息确定方法还包括：
15.若根据所述卡片宽度、所述卡片外边距和页面宽度计算出的计算结果大于预设留白宽度，则对所述卡片个数进行调整；
16.根据调整后的卡片个数、所述卡片外边距和所述页面宽度，计算优化调整后的卡片宽度。
17.其中，根据所述卡片宽度、所述卡片外边距和页面宽度计算所述计算结果，包括：
18.计算所述页面宽度与所述卡片外边距之间的差值；
19.计算所述差值与所述卡片宽度的余数，并将所述余数作为所述计算结果。
20.其中，所述根据调整后的卡片个数、所述卡片外边距和所述页面宽度，计算优化调整后的卡片宽度，包括：
21.计算所述页面宽度与所述卡片外边距之间的差值；
22.计算所述差值与所述调整后的卡片个数的比值，并将比值结果与所述卡片外边距之差作为所述优化调整后的卡片宽度。
23.一方面，本发明提出一种页面布局信息确定装置，包括：
24.计算单元，用于若监听到页面宽度发生变化，则计算初始页面布局信息；
25.确定单元，用于根据变化后的页面宽度和所述初始页面布局信息，确定与预配置的页面布局信息计算方式对应变化后的页面布局信息。
26.再一方面，本发明实施例提供一种电子设备，包括：处理器、存储器和总线，其中，
27.所述处理器和所述存储器通过所述总线完成相互间的通信；
28.所述存储器存储有可被所述处理器执行的程序指令，所述处理器调用所述程序指令能够执行如下方法：
29.若监听到页面宽度发生变化，则计算初始页面布局信息；
30.根据变化后的页面宽度和所述初始页面布局信息，确定与预配置的页面布局信息计算方式对应变化后的页面布局信息。
31.本发明实施例提供一种非暂态计算机可读存储介质，包括：
32.所述非暂态计算机可读存储介质存储计算机指令，所述计算机指令使所述计算机执行如下方法：
33.若监听到页面宽度发生变化，则计算初始页面布局信息；
34.根据变化后的页面宽度和所述初始页面布局信息，确定与预配置的页面布局信息计算方式对应变化后的页面布局信息。
35.本发明实施例提供的页面布局信息确定方法及装置，若监听到页面宽度发生变化，则计算初始页面布局信息；根据变化后的页面宽度和所述初始页面布局信息，确定与预配置的页面布局信息计算方式对应变化后的页面布局信息，由于预配置的页面布局信息计算方式为具体的定量计算方式，因此可以定量计算出页面布局信息的具体计算数值，提高页面布局的精细化程度，也提升了页面布局展示效果。
附图说明
36.为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以
根据这些附图获得其他的附图。在附图中：
37.图1是本发明一实施例提供的页面布局信息确定方法的流程示意图。
38.图2是本发明另一实施例提供的页面布局信息说明示意图。
39.图3是本发明一实施例提供的页面布局信息确定装置的结构示意图。
40.图4为本发明实施例提供的电子设备实体结构示意图。
具体实施方式
41.为使本发明实施例的目的、技术方案和优点更加清楚明白，下面结合附图对本发明实施例做进一步详细说明。在此，本发明的示意性实施例及其说明用于解释本发明，但并不作为对本发明的限定。需要说明的是，在不冲突的情况下，本技术中的实施例及实施例中的特征可以相互任意组合。
42.图1是本发明一实施例提供的页面布局信息确定方法的流程示意图，如图1所示，本发明实施例提供的页面布局信息确定方法，包括：
43.步骤s1：若监听到页面宽度发生变化，则计算初始页面布局信息。
44.步骤s2：根据变化后的页面宽度和所述初始页面布局信息，确定与预配置的页面布局信息计算方式对应变化后的页面布局信息。
45.在上述步骤s1中，装置若监听到页面宽度发生变化，则计算初始页面布局信息。装置可以是执行该方法的计算机设备，例如可以为服务器或客户端。初始页面布局信息可以理解为页面宽度变化前的页面布局信息，可以包括初始卡片外边距、初始卡片个数和初始卡片宽度等。
46.页面可以包括浏览器页面，不作具体限定。页面宽度如图2所示，可以在卡片绑定到页面上之后，开启监听页面的resize事件，这是监听页面调整宽度常规技术，装置通过开启监听页面的resize事件实现监听到页面宽度是否发生变化。页面宽度发生变化可以包括页面宽度放大或页面宽度缩小。
47.在上述步骤s2中，装置根据变化后的页面宽度和所述初始页面布局信息，确定与预配置的页面布局信息计算方式对应变化后的页面布局信息。页面布局信息可以理解为页面宽度变化后适配计算出的页面布局信息，可以包括卡片外边距、卡片个数和卡片宽度等。由于本技术预配置的页面布局信息计算方式为具体的定量计算方式，因此可以定量计算出页面布局信息的具体计算数值。
48.所述根据变化后的页面宽度和所述初始页面布局信息，确定与预配置的页面布局信息计算方式对应变化后的页面布局信息，包括：
49.根据所述变化后的页面宽度、所述初始卡片外边距和所述初始卡片个数，计算所述页面布局信息中的卡片宽度。具体根据如下公式计算页面布局信息中的卡片宽度：
50.卡片宽度＝(变化后的页面宽度-初始卡片外边距-初始卡片个数
×
初始卡片外边距)/初始卡片个数。需要说明的是，本技术的初始卡片个数和卡片个数为同一行的卡片个数。如图2所示的卡片个数为4个。实现自适应计算卡片宽度适配页面宽度的变化。
51.所述根据变化后的页面宽度和所述初始页面布局信息，确定与预配置的页面布局信息计算方式对应变化后的页面布局信息，包括：
52.根据所述变化后的页面宽度、所述初始卡片宽度和所述初始卡片个数，计算所述
页面布局信息中的卡片外边距。具体根据如下公式计算页面布局信息中的卡片外边距：
53.卡片外边距＝(变化后的页面宽度-初始卡片个数
×
初始卡片宽度)/(初始卡片个数+1)。实现自适应计算卡片外边距适配页面宽度的变化。
54.所述根据变化后的页面宽度和所述初始页面布局信息，确定与预配置的页面布局信息计算方式对应变化后的页面布局信息，包括：
55.根据所述变化后的页面宽度、所述初始卡片宽度、所述初始卡片个数和所述初始卡片外边距，计算所述页面布局信息中的页面内边距。具体根据如下公式计算页面布局信息中的页面内边距：
56.页面内边距＝(变化后的页面宽度+初始卡片外边距-初始卡片个数
×
(初始卡片宽度+初始卡片外边距))/2。实现自适应计算页面内边距适配页面宽度的变化。
57.本发明实施例提供的页面布局信息确定方法，若监听到页面宽度发生变化，则计算初始页面布局信息；根据变化后的页面宽度和所述初始页面布局信息，确定与预配置的页面布局信息计算方式对应变化后的页面布局信息，由于预配置的页面布局信息计算方式为具体的定量计算方式，因此可以定量计算出页面布局信息的具体计算数值，提高页面布局的精细化程度，也提升了页面布局展示效果。
58.进一步地，所述初始页面布局信息包括初始卡片外边距和初始卡片个数；相应的，所述根据变化后的页面宽度和所述初始页面布局信息，确定与预配置的页面布局信息计算方式对应变化后的页面布局信息，包括：
59.根据所述变化后的页面宽度、所述初始卡片外边距和所述初始卡片个数，计算所述页面布局信息中的卡片宽度。可参照上述说明，不再赘述。
60.本发明实施例提供的页面布局信息确定方法，通过自适应定量计算卡片宽度，从而适配页面宽度的变化，进一步提高页面布局的精细化程度，也提升了页面布局展示效果。
61.进一步地，所述初始页面布局信息包括初始卡片宽度和初始卡片个数；相应的，所述根据变化后的页面宽度和所述初始页面布局信息，确定与预配置的页面布局信息计算方式对应变化后的页面布局信息，包括：
62.根据所述变化后的页面宽度、所述初始卡片宽度和所述初始卡片个数，计算所述页面布局信息中的卡片外边距。可参照上述说明，不再赘述。
63.本发明实施例提供的页面布局信息确定方法，通过自适应定量计算卡片外边距，从而适配页面宽度的变化，进一步提高页面布局的精细化程度，也提升了页面布局展示效果。
64.进一步地，所述初始页面布局信息包括初始卡片宽度、初始卡片个数和初始卡片外边距；相应的，所述根据变化后的页面宽度和所述初始页面布局信息，确定与预配置的页面布局信息计算方式对应变化后的页面布局信息，包括：
65.根据所述变化后的页面宽度、所述初始卡片宽度、所述初始卡片个数和所述初始卡片外边距，计算所述页面布局信息中的页面内边距。可参照上述说明，不再赘述。
66.本发明实施例提供的页面布局信息确定方法，通过自适应定量计算页面内边距，从而适配页面宽度的变化，进一步提高页面布局的精细化程度，也提升了页面布局展示效果。
67.进一步地，所述页面布局信息包括卡片宽度、卡片外边距和卡片个数；相应的，所
述页面布局信息确定方法还包括：
68.若根据所述卡片宽度、所述卡片外边距和页面宽度计算出的计算结果大于预设留白宽度，则对所述卡片个数进行调整；预设留白宽度可以根据实际情况自主设置。可以通过对卡片个数加1，实现对卡片个数进行调整。
69.如果上述计算结果小于等于预设留白宽度，则不对卡片个数进行调整。
70.根据所述卡片宽度、所述卡片外边距和页面宽度计算所述计算结果，包括：
71.计算所述页面宽度与所述卡片外边距之间的差值；将差值记为caclw。
72.计算所述差值与所述卡片宽度的余数，并将所述余数作为所述计算结果。将caclw％卡片宽度的结果作为上述余数。
73.根据调整后的卡片个数、所述卡片外边距和所述页面宽度，计算优化调整后的卡片宽度。
74.所述根据调整后的卡片个数、所述卡片外边距和所述页面宽度，计算优化调整后的卡片宽度，包括：
75.计算所述页面宽度与所述卡片外边距之间的差值；即得到上述caclw。
76.计算所述差值与所述调整后的卡片个数的比值，并将比值结果与所述卡片外边距之差作为所述优化调整后的卡片宽度。
77.根据如下公式计算优化调整后的卡片宽度：
78.即：gridw＝caclw/(1+gridnum)-basemg
79.其中，gridw为优化调整后的卡片宽度、gridnum为调整前的卡片个数、basemg为卡片外边距、1+gridnum为调整后的卡片个数。
80.参照图2说明如下，如果图2中的计算结果大于预设留白宽度，则说明计算结果表示的留白宽度较大，可以理解的是，计算结果是小于卡片宽度的，因此，可以增加1个卡片个数，相应的，优化调整后的卡片宽度会减小，通过优化调整后的卡片宽度的计算步骤，可以定量计算出优化调整后的卡片宽度。
81.本发明实施例提供的页面布局信息确定方法，定量计算出优化调整后的卡片宽度，减少了页面留白宽度，进一步提高页面布局的精细化程度，也提升了页面布局展示效果。
82.进一步地，根据所述卡片宽度、所述卡片外边距和页面宽度计算所述计算结果，包括：
83.计算所述页面宽度与所述卡片外边距之间的差值；可参照上述说明，不再赘述。
84.计算所述差值与所述卡片宽度的余数，并将所述余数作为所述计算结果。可参照上述说明，不再赘述。
85.本发明实施例提供的页面布局信息确定方法，通过简单的计算公式，有助于快速定量计算出优化调整后的卡片宽度，进一步减少了计算机运算量。
86.进一步地，所述根据调整后的卡片个数、所述卡片外边距和所述页面宽度，计算优化调整后的卡片宽度，包括：
87.计算所述页面宽度与所述卡片外边距之间的差值；可参照上述说明，不再赘述。
88.计算所述差值与所述调整后的卡片个数的比值，并将比值结果与所述卡片外边距之差作为所述优化调整后的卡片宽度。可参照上述说明，不再赘述。
89.本发明实施例提供的页面布局信息确定方法，通过简单的计算公式，能够快速定量计算出优化调整后的卡片宽度，进一步减少了计算机运算量。
90.在所述确定与预配置的页面布局信息计算方式对应变化后的页面布局信息的步骤之后，所述页面布局信息确定方法还包括：取消监听页面宽度是否发生变化，进一步可以通过关闭监听页面的resize事件，以实现取消监听页面宽度是否发生变化。
91.在所述确定与预配置的页面布局信息计算方式对应变化后的页面布局信息的步骤之后，还需要对卡片赋予页面布局信息的计算数值，可以通过css变量传值的方式，并通过页面容器将计算数值赋予卡片组件，实现对卡片赋予页面布局信息的计算数值。css变量更加轻量，并且兼容性更好。
92.需要说明的是，本发明实施例提供的页面布局信息确定方法可用于金融领域，也可用于除金融领域之外的任意技术领域，本发明实施例对页面布局信息确定方法的应用领域不做限定。
93.图3是本发明一实施例提供的页面布局信息确定装置的结构示意图，如图3所示，本发明实施例提供的页面布局信息确定装置，包括计算单元301和确定单元302，其中：
94.计算单元301用于若监听到页面宽度发生变化，则计算初始页面布局信息；确定单元302用于根据变化后的页面宽度和所述初始页面布局信息，确定与预配置的页面布局信息计算方式对应变化后的页面布局信息。
95.具体的，装置中的计算单元301用于若监听到页面宽度发生变化，则计算初始页面布局信息；确定单元302用于根据变化后的页面宽度和所述初始页面布局信息，确定与预配置的页面布局信息计算方式对应变化后的页面布局信息。
96.本发明实施例提供的页面布局信息确定装置，若监听到页面宽度发生变化，则计算初始页面布局信息；根据变化后的页面宽度和所述初始页面布局信息，确定与预配置的页面布局信息计算方式对应变化后的页面布局信息，由于预配置的页面布局信息计算方式为具体的定量计算方式，因此可以定量计算出页面布局信息的具体计算数值，提高页面布局的精细化程度，也提升了页面布局展示效果。
97.进一步地，所述初始页面布局信息包括初始卡片外边距和初始卡片个数；相应的，所述确定单元302具体用于：
98.根据所述变化后的页面宽度、所述初始卡片外边距和所述初始卡片个数，计算所述页面布局信息中的卡片宽度。
99.本发明实施例提供的页面布局信息确定装置，通过自适应定量计算卡片宽度，从而适配页面宽度的变化，进一步提高页面布局的精细化程度，也提升了页面布局展示效果。
100.进一步地，所述初始页面布局信息包括初始卡片宽度和初始卡片个数；相应的，所述确定单元302具体用于：
101.根据所述变化后的页面宽度、所述初始卡片宽度和所述初始卡片个数，计算所述页面布局信息中的卡片外边距。
102.本发明实施例提供的页面布局信息确定装置，通过自适应定量计算卡片外边距，从而适配页面宽度的变化，进一步提高页面布局的精细化程度，也提升了页面布局展示效果。
103.进一步地，所述初始页面布局信息包括初始卡片宽度、初始卡片个数和初始卡片
外边距；相应的，所述确定单元302具体用于：
104.根据所述变化后的页面宽度、所述初始卡片宽度、所述初始卡片个数和所述初始卡片外边距，计算所述页面布局信息中的页面内边距。
105.本发明实施例提供的页面布局信息确定装置，通过自适应定量计算页面内边距，从而适配页面宽度的变化，进一步提高页面布局的精细化程度，也提升了页面布局展示效果。
106.进一步地，所述页面布局信息包括卡片宽度、卡片外边距和卡片个数；相应的，所述页面布局信息确定装置还用于：
107.若根据所述卡片宽度、所述卡片外边距和页面宽度计算出的计算结果大于预设留白宽度，则对所述卡片个数进行调整；预设留白宽度可以根据实际情况自主设置。可以通过对卡片个数加1，实现对卡片个数进行调整。
108.本发明实施例提供的页面布局信息确定装置，定量计算出优化调整后的卡片宽度，减少了页面留白宽度，进一步提高页面布局的精细化程度，也提升了页面布局展示效果。
109.进一步地，所述页面布局信息确定装置还具体用于：
110.计算所述页面宽度与所述卡片外边距之间的差值；
111.计算所述差值与所述卡片宽度的余数，并将所述余数作为所述计算结果。
112.本发明实施例提供的页面布局信息确定装置，通过简单的计算公式，有助于快速定量计算出优化调整后的卡片宽度，进一步减少了计算机运算量。
113.进一步地，所述页面布局信息确定装置还具体用于：
114.计算所述页面宽度与所述卡片外边距之间的差值；
115.计算所述差值与所述调整后的卡片个数的比值，并将比值结果与所述卡片外边距之差作为所述优化调整后的卡片宽度。
116.本发明实施例提供的页面布局信息确定装置，通过简单的计算公式，能够快速定量计算出优化调整后的卡片宽度，进一步减少了计算机运算量。
117.本发明实施例提供页面布局信息确定装置的实施例具体可以用于执行上述各方法实施例的处理流程，其功能在此不再赘述，可以参照上述方法实施例的详细描述。
118.图4为本发明实施例提供的电子设备实体结构示意图，如图4所示，所述电子设备包括：处理器(processor)401、存储器(memory)402和总线403；
119.其中，所述处理器401、存储器402通过总线403完成相互间的通信；
120.所述处理器401用于调用所述存储器402中的程序指令，以执行上述各方法实施例所提供的方法，例如包括：
121.若监听到页面宽度发生变化，则计算初始页面布局信息；
122.根据变化后的页面宽度和所述初始页面布局信息，确定与预配置的页面布局信息计算方式对应变化后的页面布局信息。
123.本实施例公开一种计算机程序产品，所述计算机程序产品包括存储在非暂态计算机可读存储介质上的计算机程序，所述计算机程序包括程序指令，当所述程序指令被计算机执行时，计算机能够执行上述各方法实施例所提供的方法，例如包括：
124.若监听到页面宽度发生变化，则计算初始页面布局信息；
125.根据变化后的页面宽度和所述初始页面布局信息，确定与预配置的页面布局信息计算方式对应变化后的页面布局信息。
126.本实施例提供一种计算机可读存储介质，所述计算机可读存储介质存储计算机程序，所述计算机程序使所述计算机执行上述各方法实施例所提供的方法，例如包括：
127.若监听到页面宽度发生变化，则计算初始页面布局信息；
128.根据变化后的页面宽度和所述初始页面布局信息，确定与预配置的页面布局信息计算方式对应变化后的页面布局信息。
129.本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、cd-rom、光学存储器等)上实施的计算机程序产品的形式。
130.本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
131.这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
132.这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
133.在本说明书的描述中，参考术语“一个实施例”、“一个具体实施例”、“一些实施例”、“例如”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不一定指的是相同的实施例或示例。而且，描述的具体特征、结构、材料或者特点可以在任何的一个或多个实施例或示例中以合适的方式结合。
134.以上所述的具体实施例，对本发明的目的、技术方案和有益效果进行了进一步详细说明，所应理解的是，以上所述仅为本发明的具体实施例而已，并不用于限定本发明的保护范围，凡在本发明的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。