CN111581570B - 一种页面布局方法及计算设备 - Google Patents

Abstract

本发明公开了一种页面布局方法，在计算设备中执行，其中页面包括多个元素行，每个元素行包括至少一个元素，元素采用横向浮动布局进行展示，并采用预设的边距与相邻元素隔开，该方法包括：获取页面中的元素，并确定每个元素在页面中的初始位置；依次对每一个元素执行以下处理步骤：判断当前元素是否为非首行的第一个元素，其中，非首行为页面中除第一个元素行之外的元素行；若当前元素为非首行的第一个元素，则判断当前元素是否因边距而被换行，若是，则减小当前元素的边距，以使该元素由当前元素行的第一个元素调整至上一元素行的最后一个元素；以及根据当前元素的调整结果，重新确定后续元素在页面中的位置。本发明一并公开了相应的计算设备。

Description

一种页面布局方法及计算设备

技术领域

本发明涉及页面显示技术领域，尤其涉及一种页面布局方法及计算设备。

背景技术

页面布局是一项重要的技术，良好的页面布局可以使界面组织得更加合理，提高信息展示效率和用户体验。

页面布局常常因为浏览器内核及其所支持的HTML等网页语言标准不同，以及用户终端的环境不同(如分辨率不同)而造成显示效果不能达到理想效果。最常见的显示问题就是页面元素的大小不同，位置混乱、错位。这种问题被称为网页兼容性或网站兼容性问题。在网页的设计和制作中，做好网页兼容，才能够让网页在不同的浏览器、不同的终端环境下都能够正常显示。

横向布局和纵向布局是两种常见的页面布局模式，而横向布局相较于纵向布局应用更加频繁。通常地，在横向布局中，采用CSS语言来定义页面中各元素的样式，设置各元素的宽度，并使其居左浮动，这样便可以达到元素横排的目的。然而这样的布局并不美观，无法高效地利用有限的页面空间。尤其是在响应式网页开发中，虽说可以将元素的宽度设置为页面百分比的形式，但在多数情况下，页面布局仍会被元素的边距值(例如margin值等)所影响，从而导致页面右侧空缺过大以及元素换行的现象。例如，在图1所示的页面中，元素1～10采用横向浮动布局，页面右侧出现较大空缺，页面布局不合理，空间利用率不高，且不够美观。

发明内容

为此，本发明提供一种页面布局方法及计算设备，以力图解决或至少缓解上面存在的问题。

根据本发明的第一个方面，提供一种页面布局方法，在计算设备中执行，所述页面包括多个元素行，每个元素行包括至少一个元素，所述页面中的元素采用横向浮动布局进行展示，并采用预设的边距与相邻元素隔开，所述方法包括：获取页面中的元素，并确定每个元素在所述页面中的初始位置；依次对每一个元素执行以下处理步骤：判断当前元素是否为非首行的第一个元素，其中，所述非首行为所述页面中除第一个元素行之外的元素行；若当前元素为非首行的第一个元素，则判断当前元素是否因边距而被换行，若是，则减小当前元素的边距，以使该元素由当前元素行的第一个元素调整为上一元素行的最后一个元素；以及根据当前元素的调整结果，重新确定后续元素在所述页面中的位置。

可选地，在根据本发明的页面布局方法中，按照以下步骤来判断当前元素是否为非首行的第一个元素：获取当前元素的左边到页面左边的距离，记为当前距离；获取上一个元素的左边到页面左边的距离，记为上一距离；若当前距离小于上一距离，则当前元素为非首行的第一个元素。

可选地，在根据本发明的页面布局方法中，按照以下步骤来判断当前元素是否因边距而被换行：获取上一个元素的左边到页面左边的距离、上一个元素的宽度、上一个元素的边距、当前元素的宽度以及页面内边距；若五者之和小于等于页面总宽度，则当前元素是因边距而被换行。

可选地，在根据本发明的页面布局方法中，减小当前元素的边距的步骤包括：将当前元素的边距设置为0。

可选地，在根据本发明的页面布局方法中，元素对应于一个CSS盒模型，元素的边距通过margin-right属性值来设置。

可选地，在根据本发明的页面布局方法中，若当前元素不是非首行的第一个元素，则继续对下一个元素进行处理。

可选地，在根据本发明的页面布局方法中，当最后一个元素完成处理后，绘制所述页面，以将所述页面呈现在所述计算设备的屏幕上。

可选地，在根据本发明的页面布局方法中，该方法在页面尺寸发生变化或元素发生变化时被触发执行。

可选地，在根据本发明的页面布局方法中，该方法在页面尺寸变化的过程中，按照预设频率被触发执行。

可选地，在根据本发明的页面布局方法中，该方法在页面尺寸变化完成后，响应于用户发出的页面布局命令而被触发执行。

根据本发明的第二个方面，提供一种计算设备，包括：至少一个处理器；和存储有程序指令的存储器，当所述程序指令被所述处理器读取并执行时，使得所述计算设备执行如上所述的页面布局方法。

根据本发明的第三个方面，提供一种存储有程序指令的可读存储介质，当所述程序指令被计算设备读取并执行时，使得所述计算设备执行如上所述的页面布局方法。

本发明的技术方案能够找到影响页面布局的特殊元素(即从第二个元素行开始，每个元素行的第一个元素)，并调整其边距，使得页面布局更加紧凑、合理，避免页面右侧空缺过大以及不必要的元素换行。

进一步地，本发明的技术方案可以实现页面的实时布局。当页面尺寸发生变化或元素数据发生变化时，将会触发执行本发明的页面布局方法，使得页面重新布局，使页面保持良好的视觉效果。

上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂，以下特举本发明的具体实施方式。

附图说明

为了实现上述以及相关目的，本文结合下面的描述和附图来描述某些说明性方面，这些方面指示了可以实践本文所公开的原理的各种方式，并且所有方面及其等效方面旨在落入所要求保护的主题的范围内。通过结合附图阅读下面的详细描述，本公开的上述以及其它目的、特征和优势将变得更加明显。遍及本公开，相同的附图标记通常指代相同的部件或元素。

图1示出了现有技术的横向浮动布局的页面展示效果的示意图；

图2示出了根据本发明一个实施例的计算设备100的示意图；

图3示出了根据本发明一个实施例的页面布局方法300的流程图；

图4示出了根据本发明一个实施例的CSS盒模型的示意图；

图5示出了根据本发明一个实施例的元素处理过程的示意图；

图6示出了采用本发明的页面布局方法300对图1所示的页面进行重新布局后的页面展示效果的示意图；

图7示出了本发明的页面布局方法300的实施过程的示意图；以及

图8示出了本发明的页面布局方法300的一个具体应用场景的示意图。

具体实施方式

下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。

针对现有技术中存在的横向浮动布局的页面空间利用率不高且不够美观的问题，本发明提供一种页面布局方法，使得页面布局更加合理，呈现良好的视觉展示效果。

本发明的页面布局方法在计算设备中执行。计算设备可以是任意具有显示屏幕的设备，其例如可以是桌面计算机、笔记本计算机等个人配置的计算机，或者手机、平板电脑、智能可穿戴设备等便携式移动终端，或者物联网设备等，但不限于此。计算设备配置有显示器，并且安装有多种应用(App)，例如浏览器、内容资讯应用、即时通讯应用、购物应用等。用户可以通过对应用进行操作来访问相应的页面。在本发明的实施例中，用户所访问的页面中集成了用于执行本发明的页面布局方法300的代码，计算设备执行该代码，从而使得用户所访问的页面的布局更加合理，避免页面右侧空缺过大以及元素换行。

图2示出了根据本发明一个实施例的计算设备100的示意图。需要说明的是，图2所示的计算设备100仅为一个示例，在实践中，用于实施本发明的页面布局方法的计算设备可以是任意型号的设备，其硬件配置情况可以与图2所示的计算设备100相同，也可以与图2所示的计算设备100不同。实践中用于实施本发明的页面布局方法的计算设备可以对图2所示的计算设备100的硬件组件进行增加或删减，本发明对计算设备的具体硬件配置情况不做限制。

如图2所示，在基本的配置102中，计算设备100典型地包括系统存储器106和一个或者多个处理器104。存储器总线108可以用于在处理器104和系统存储器106之间的通信。

取决于期望的配置，处理器104可以是任何类型的处理，包括但不限于：微处理器(μP)、微控制器(μC)、数字信息处理器(DSP)或者它们的任何组合。处理器104可以包括诸如一级高速缓存110和二级高速缓存112之类的一个或者多个级别的高速缓存、处理器核心114和寄存器116。示例的处理器核心114可以包括运算逻辑单元(ALU)、浮点数单元(FPU)、数字信号处理核心(DSP核心)或者它们的任何组合。示例的存储器控制器118可以与处理器104一起使用，或者在一些实现中，存储器控制器118可以是处理器104的一个内部部分。

取决于期望的配置，系统存储器106可以是任意类型的存储器，包括但不限于：易失性存储器(诸如RAM)、非易失性存储器(诸如ROM、闪存等)或者它们的任何组合。计算设备中的物理内存通常指的是易失性存储器RAM，磁盘中的数据需要加载至物理内存中才能够被处理器104读取。系统存储器106可以包括操作系统120、一个或者多个应用122以及程序数据124。在一些实施方式中，应用122可以布置为在操作系统上由一个或多个处理器104利用程序数据124执行指令。操作系统120例如可以是Linux、Windows等，其包括用于处理基本系统服务以及执行依赖于硬件的任务的程序指令。应用122包括用于实现各种用户期望的功能的程序指令，应用122例如可以是浏览器、即时通讯软件、软件开发工具(例如集成开发环境IDE、编译器等)等，但不限于此。当应用122被安装到计算设备100中时，可以向操作系统120添加驱动模块。

在计算设备100启动运行时，处理器104会从存储器106中读取操作系统120的程序指令并执行。应用122运行在操作系统120之上，利用操作系统120以及底层硬件提供的接口来实现各种用户期望的功能。当用户启动应用122时，应用122会加载至存储器106中，处理器104从存储器106中读取并执行应用122的程序指令。

计算设备100还可以包括有助于从各种接口设备(例如，输出设备142、外设接口144和通信设备146)到基本配置102经由总线/接口控制器130的通信的接口总线140。示例的输出设备142包括图形处理单元148和音频处理单元150。它们可以被配置为有助于经由一个或者多个A/V端口152与诸如显示器或者扬声器之类的各种外部设备进行通信。示例外设接口144可以包括串行接口控制器154和并行接口控制器156，它们可以被配置为有助于经由一个或者多个I/O端口158和诸如输入设备(例如，键盘、鼠标、笔、语音输入设备、触摸输入设备)或者其他外设(例如打印机、扫描仪等)之类的外部设备进行通信。示例的通信设备146可以包括网络控制器160，其可以被布置为便于经由一个或者多个通信端口164与一个或者多个其他计算设备162通过网络通信链路的通信。

网络通信链路可以是通信介质的一个示例。通信介质通常可以体现为在诸如载波或者其他传输机制之类的调制数据信号中的计算机可读指令、数据结构、程序模块，并且可以包括任何信息递送介质。“调制数据信号”可以这样的信号，它的数据集中的一个或者多个或者它的改变可以在信号中编码信息的方式进行。作为非限制性的示例，通信介质可以包括诸如有线网络或者专线网络之类的有线介质，以及诸如声音、射频(RF)、微波、红外(IR)或者其它无线介质在内的各种无线介质。这里使用的术语计算机可读介质可以包括存储介质和通信介质二者。

在根据本发明的计算设备100中，应用122包括用于执行本发明的页面布局方法300的指令，该指令可以指示处理器104执行本发明的页面布局方法300，以调整页面布局，使页面布局更加紧凑、合理，呈现良好的视觉效果。

图3示出了根据本发明一个实施例的页面布局方法300的流程图。方法300在计算设备(例如前述计算设备100)中执行，用于找到影响页面布局的特殊元素，并调整其边距，使得页面布局更加紧凑、合理，弥补CSS横向浮动布局的页面右侧空缺过大以及元素换行的缺陷。如图3所示，方法300始于步骤S310。

在步骤S310中，获取页面中的元素，并确定每个元素在页面中的初始位置。

需要说明的是，页面中的元素可以是任意类型，本发明对元素的类型不做限制。例如，元素可以是标签(Label)元素、按钮(Button)元素等。

页面中的元素通常按照一定的规则进行排列，以期达到良好的展示效果。在本发明的实施例中，页面中的元素采用横向浮动布局进行展示，元素依次排列形成多个元素行，每个元素行包括至少一个元素。每个元素采用预设的边距来与相邻元素隔开。

根据一种实施例，每个元素对应于一个CSS盒(Box)模型。CSS(Cascading StyleSheets，层叠样式表)是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

图4示出了CSS的盒模型的示意图。如图4所示，每个盒子由四个区域组成，即：内容(content)、内边距(padding)、边框(border)和外边距(margin)。其中，内边距(padding)进一步包括上内边距(padding-top)、下内边距(padding-bottom)、左内边距(padding-left)、右内边距(padding-right)；边框(border)进一步包括上边框(border-top)、下边框(border-bottom)、左边框(border-left)、右边框(border-right)；外边距(margin)进一步包括上外边距(margin-top)、下外边距(margin-bottom)、左外边距(margin-left)、右外边距(margin-right)。

外边距(margin)是透明不可见的，用于控制元素之间的距离。根据实际需要，可以选择设置上、下、左、右外边距中的一个或多个，并且可以将上、下、左、右外边距分别设置为不同的值。在本发明的实施例中，元素采用横向浮动布局居左排列，根据一种实施例，可以通过设置元素的右外边距(margin-right)属性值来将相邻元素隔开。

在步骤S310中，获取页面中待渲染的元素数据。元素数据有两种，一种是静态数据，其直接写在页面的HTML文件中，可以通过JavaScript脚本获取到元素对象，然后调用其getAttribute(‘属性名’)的方法来获得，例如，layout元素的type属性值可以通过以下JS脚本来获得：

document.getElementById(‘layout’).getAttribute(‘type’)。

另一种是动态数据，这种数据没有写在页面的HTML文件中，需要通过网络向相应的服务器发送请求而获取。

在获取到页面中各个元素的数据后，将各元素数据统一存储，例如，定义列表dataList，将获取到的元素数据存储至该列表中，以备后用。

基于获取到的元素数据，浏览器可以生成页面的DOM(Document Object Model，文档对象模型)树，并基于DOM树来确定各个元素在页面中的初始位置。如果按照各元素的初始位置来渲染页面，页面的右侧可能会出现较大的空缺(如图1所示)，导致页面布局不合理、空间利用率不高，且不够美观。因此，在本发明的实施例中，当确定各元素在页面中的初始位置后，不是直接按照各元素的初始位置来渲染页面，而是通过执行后续步骤S320来调整各元素的位置，调整完成之后，再对页面进行渲染以呈现给用户，从而使页面布局更加紧凑、合理，呈现良好的视觉效果。

在步骤S320中，依次对每一个元素执行以下处理步骤：判断当前元素是否为非首行的第一个元素，其中，非首行为页面中除第一个元素行之外的元素行；若当前元素为非首行的第一个元素，则判断当前元素是否因边距而被换行，若是，则减小当前元素的边距，以使该元素由当前元素行的第一个元素调整为上一元素行的最后一个元素；以及根据当前元素的调整结果，重新确定后续元素在页面中的位置。

根据一种实施例，可以按照以下步骤来判断当前元素是否为非首行的第一个元素：获取当前元素的左边到页面左边的距离，记为当前距离nowLeft；获取上一个元素的左边到页面左边的距离，记为上一距离lastLeft。如果当前元素为页面中的第一个元素，则可以将nowLeft的值赋值给lastLeft，作为lastLeft的初始值。元素的左边到页面左边的距离例如可以通过调用JS方法document.getElementById().offsetLeft来得到。

若当前距离nowLeft小于上一距离lastLeft，即nowLeft<lastLeft，则当前元素为非首行的第一个元素，继续判断当前元素是否因边距而被换行；若当前距离nowLeft大于等于上一距离lastLeft，则将当前元素的边距(margin-right)设置为预设值，随后继续对页面中的下一个元素进行步骤S320的处理。

根据一种实施例，可以按照以下步骤来判断当前元素是否因边距而被换行：获取上一个元素的左边到页面左边的距离lastLeft、上一个元素的宽度lastItemWidth、上一个元素的边距marginRight、当前元素的宽度itemWidth以及页面内边距bodyPadding。这5个参数例如可以通过以下方法获取：

lastLeft＝document.getElementById(‘上一个元素的id’).offsetLeft；

o1＝document.getElementById(‘上一个元素的id’)；//获取上一个元素

lastItemWidth＝o1.clientWidth||o1.offsetWidth；//“||”表示或者

o2＝document.getElementById(‘当前元素的id’)；//获取当前元素

itemWidth＝o2.clientWidth||o2.offsetWidth；

marginRight、bodyPadding为预设值。应当指出，marginRight、bodyPadding的值可以由本领域技术人员根据设计需求自行设置，本发明对二者的取值不做限制。在一个实施例中，例如可以将元素边距marginRight设置为7px(像素)，将页面内边距bodyPadding设置为10px。

若上述五者之和小于等于页面总宽度pageWidth(页面总宽度可以通过调用document.body.offsetWidth方法来获取，即pageWidth＝document.body.off setWidth)，即，若lastLeft+lastItemWidth+marginRight+itemWidth+bodyPaddi ng≤pageWidth，则当前元素是因边距而被换行，需要减小当前元素的边距，例如将当前元素的边距(margin-right)设置为0，以使该元素由当前元素行的第一个元素调整为上一元素行的最后一个元素。随后，根据当前元素的调整结果，重新渲染DOM树，即重新确定后续元素(即位于当前元素之后的各个元素)在页面中的位置。当DOM树渲染完成后，继续对页面中的下一个元素进行步骤S320的处理。

若上述五者之和大于页面总宽度pageWidth，即，若lastLeft+lastItemWid th+marginRight+itemWidth+bodyPadding>pageWidth，则将当前元素的边距(margin-right)设置为预设值marginRight，随后继续对页面中的下一个元素进行步骤S320的处理。

步骤S320循环执行多次，以便依次对页面中的各个元素进行处理。当最后一个元素完成处理后，绘制页面，以将该页面呈现在计算设备的屏幕上，展示给用户。

例如，图5中示出了元素0～元素3的初始位置，由图5可见，在初始位置下，页面布局不够合理，页面右侧出现了较大的空缺。基于本发明的页面布局方法300，可以调整各元素的位置，从而优化页面布局。

首先，将页面中的第一个元素，即元素0作为当前元素，进行步骤S320的处理。元素0的左边到页面左边的距离为nowLeft＝p。由于元素0为页面中的第一个元素，因此令上一距离lastLeft＝p。由于不满足nowLeft<lastLeft，因此元素0不是非首行的第一个元素，将元素0的边距margin-right设置为预设值m。

随后，将下一个元素，即元素1作为当前元素，进行步骤S320的处理。元素1的左边到页面左边的距离为nowLeft＝f1。上一个元素，即元素0的左边到页面左边的距离lastLeft＝p。由于不满足nowLeft<lastLeft，因此元素1不是非首行的第一个元素，将元素1的边距margin-right设置为预设值m。

随后，将下一个元素，即元素2作为当前元素，进行步骤S320的处理。元素2的左边到页面左边的距离为nowLeft＝p。上一个元素，即元素1的左边到页面左边的距离为lastLeft＝f1。由于nowLeft<lastLeft，因此元素2为非首行(实际上是第二个元素行)的第一个元素。随后，继续判断元素2是否是因为边距过大而被换行。

元素1的左边到页面左边的距离lastLeft＝f1、元素1的宽度lastItemWidth＝s1、元素1的边距marginRight＝m、当前元素2的宽度itemWidth＝s2、页面内边距bodyPadding＝p，页面总宽度pageWidth＝w。由于f1+s1+m+s2+p≤w，因此，元素2是因为边距过大而被换行，将元素2的边距margin-right设置为0，从而将元素2调整为第一个元素行的最后一个元素，即，将元素2调整至图5中的虚线矩形框中的位置。这样使得页面布局更加紧凑、合理，避免浪费页面空间。

在调整了元素2的位置之后，位于元素2之后的其他元素的位置也需要相应进行调整。也就是说，基于元素2的位置调整结果，重新渲染DOM树，确定后续元素(即元素3)在页面中的位置。在DOM树渲染完成后，将下一个元素，即元素3作为当前元素，进行步骤S320的处理，判断元素3是否为非首行的第一个元素，以及判断元素3是否因边距过大而被换行。此处对元素3的处理步骤不再赘述。

当页面中的最后一个元素完成步骤S320的处理后，绘制页面，以将页面呈现在计算设备的屏幕上，展示给用户。

在按照本发明的页面布局方法300对页面进行处理后，可以使页面布局更加紧凑、合理，避免出现页面右侧空缺过大以及元素换行的问题。

例如，图6示出了采用本发明的页面布局方法300对图1所示的页面进行重新布局后的页面展示效果的示意图。对比图6、图1可见，采用本发明的页面布局方法300后，页面布局更加紧凑、合理且美观，能够高效利用页面空间，避免出现页面右侧空缺。

图7示出了本发明的页面布局方法300的实施过程的示意图。页面中定义有以下字段：

dataList：需要渲染的元素列表

marginRight：元素的边距

bodyPadding：页面内边距(即页面body元素的内边距)

lastLeft：上一个元素的左边到页面左边的距离

nowLeft：当前元素的左边到页面左边的距离

record：当前元素的索引

hasNext：是否进行下一次方法调用

首先，在步骤S712中，获取页面中的元素，将元素数据存入列表dataList中。根据获取到的元素，生成页面的DOM树，确定各元素在页面中的初始位置。

随后，在步骤S714中，将dataList中的第一个元素作为当前元素。

随后，在步骤S716中，判断当前元素是否是非首行的第一个元素，即，判断当前元素的左边到页面左边的距离nowLeft是否小于上一个元素的左边到页面左边的距离lastLeft。若是，则继续执行步骤S718，判断当前元素是否因边距而被换行；若否，则执行步骤S720，将当前元素的边距margin-right设置为预设值marginRight(marginRight例如为7px)。

在步骤S718中，判断当前元素是否因边距而被换行，即，判断上一个元素的左边到页面左边的距离lastLeft、上一个元素的宽度lastItemWidth、上一个元素的边距marginRight、当前元素的宽度itemWidth以及页面内边距bodyPadding五者之和是否小于等于页面总宽度pageWidth。若是，则执行步骤S722，调整当前元素的边距；若否，则执行步骤S720，将当前元素的边距设置为预设值marginRight。

在步骤S722中，将当前元素的边距margin-right设置为0，以使该元素由当前元素行的第一个元素调整为上一元素行的最后一个元素，并将hasNext字段的值设置为True。

随后，在步骤S724中，基于调整后的当前元素重新渲染DOM树，确定后续元素在页面中的位置。

在DOM树渲染完毕后，执行步骤S726，判断当前元素是否为最后一个元素，若是，则结束页面布局过程，对页面进行渲染，将页面呈现于计算设备的屏幕上；若否，则执行步骤S728，将dataList中的下一个元素作为当前元素，并继续执行步骤S716，判断当前元素是否为非首行的第一个元素。

DOM树是否渲染完毕可以采用前端开发框架内置的方法来确定，例如，前端开发框架Vue、Angular、React中均内置了判断DOM渲染完成的方法。如果开发框架中没有相关判断方法，则可以按照以下步骤a～d来判断DOM是否渲染完成：

步骤a：为元素添加自定义属性my-finish，并将其初始值设置为False；当元素完成边距调整后，将my-finish的值设置为True。

步骤b：利用window对象的setInterval方法，按照指定的时间间隔(单位为毫秒)调用获取元素对象。

步骤c：获取元素对象的my-finish属性，若其值为True，则表示DOM渲染完毕。

步骤d：调用window对象的clearInterval()方法，终止setInterval方法的调用。

本发明的核心代码如下：

/>

/>

/>

本发明的页面布局方法采用CSS进行基础样式(横向浮动布局)的控制，并采用网络脚本语言JS来进行协同控制，找出影响整体布局的元素，对该元素的边距进行调整。每调整一个元素，均需要重新渲染DOM树，更新后续元素的位置。不断检查是否还存在需要修改的元素，直至全部元素符合展示需求为止。

根据一种实施例，本发明可以实现页面的实时布局。即，当页面尺寸发生变化或元素发生变化时，触发执行页面布局方法300，来调整页面布局。

在一些实施例中，网页会通过标签(Label)元素来向用户进行数据推送。随着互联网发展越来越成熟，行业的数据收集越来越齐全，数据推送越来越精准，并且所推送的数据是动态的、实时更新的。例如，图8所示的页面通过标签元素来向用户展示不同城市的热门景点，每一个标签元素对应于一个景点，元素数据为该景点的名称和热度。景点的热度可能会随时间变化，因此图8页面中的每个元素中显示的热度值、以及各个元素的显示顺序也是实时变化的。当元素发生变化时，会触发执行本发明的页面布局方法300，来实时调整页面布局，使页面布局保持紧凑、合理，呈现出良好的视觉效果。

根据一种实施例，页面布局方法300在页面尺寸变化(即浏览器窗口尺寸变化)的过程中，按照预设频率被触发执行。例如，当用户拖动浏览器边框导致浏览器窗口尺寸变化的过程中，页面布局方法300将按照预设频率被多次执行，计算设备的屏幕上将展示出每次执行方法300后的页面布局状况，这样，用户便可以看到页面布局渐变的过程。本领域技术人员可以理解，频率设置得越大，页面布局的渐变过程将展示得越流畅。

根据另一种实施例，页面布局方法300在页面尺寸变化完成后，响应于用户发出的页面布局命令(例如用户点击页面刷新功能键等)而被触发执行。在该实施例中，页面布局方法300仅在页面尺寸再次被确定后被执行一次，用户只能看到页面布局结果，而无法看到页面布局的渐变过程。

根据一种实施例，在页面的实时布局中，可以通过事件通知机制来实现浏览器尺寸变化的监控。具体地：浏览器中存在很多类型的事件，用户如果关注某个事件，可以在代码中订阅这些感兴趣的事件，并为这个事件指定一个处理函数，当事件发生时，浏览器会通知订阅者发生了此事件，并调用相应的处理函数。

如上文所述，浏览器支持JS脚本，相应地，可以在页面载入的JS脚本中，订阅“窗口尺寸发生变化”的这个事件，事件名称为onresize，并为其指定事件处理函数，将本发明的页面布局方法300的处理逻辑写在这个事件处理函数中，当窗口大小发生了变化时，浏览器会去调用这个事件处理函数，也就是执行本发明的页面布局方法300。

本发明提供了一种页面布局方法，该方法采用JS网络脚本语言实现，可以弥补横向浮动布局受元素边距属性影响的缺陷，使页面布局更加紧凑、合理。本发明的页面布局方法仅通过脚本语言即可完成，不必引入额外资源，其实施简洁、灵活。

此外，本发明的页面布局方法具有通用性，任何CSS纯样式无法实现的效果，都可以用网络脚本语言辅助实现。最常用到的场景是元素样式受数据动态影响，必须等数据渲染完毕，利用JS动态获取元素相关属性，再进行二次样式设置。

在页面尺寸变化的过程中，按照预设频率被触发执行。

在页面尺寸变化完成后，响应于用户发出的页面布局命令而被触发执行。

这里描述的各种技术可结合硬件或软件，或者它们的组合一起实现。从而，本发明的方法和设备，或者本发明的方法和设备的某些方面或部分可采取嵌入有形媒介，例如可移动硬盘、U盘、软盘、CD-ROM或者其它任意机器可读的存储介质中的程序代码(即指令)的形式，其中当程序被载入诸如计算机之类的机器，并被所述机器执行时，所述机器变成实践本发明的设备。

在程序代码在可编程计算机上执行的情况下，计算设备一般包括处理器、处理器可读的存储介质(包括易失性和非易失性存储器和/或存储元件)，至少一个输入装置，和至少一个输出装置。其中，存储器被配置用于存储程序代码；处理器被配置用于根据该存储器中存储的所述程序代码中的指令，执行本发明的页面布局方法。

以示例而非限制的方式，可读介质包括可读存储介质和通信介质。可读存储介质存储诸如计算机可读指令、数据结构、程序模块或其它数据等信息。通信介质一般以诸如载波或其它传输机制等已调制数据信号来体现计算机可读指令、数据结构、程序模块或其它数据，并且包括任何信息传递介质。以上的任一种的组合也包括在可读介质的范围之内。

在此处所提供的说明书中，算法和显示不与任何特定计算机、虚拟系统或者其它设备固有相关。各种通用系统也可以与本发明的示例一起使用。根据上面的描述，构造这类系统所要求的结构是显而易见的。此外，本发明也不针对任何特定编程语言。应当明白，可以利用各种编程语言实现在此描述的本发明的内容，并且上面对特定语言所做的描述是为了披露本发明的最佳实施方式。

在此处所提供的说明书中，说明了大量具体细节。然而，能够理解，本发明的实施例可以在没有这些具体细节的情况下被实践。在一些实例中，并未详细示出公知的方法、结构和技术，以便不模糊对本说明书的理解。

类似地，应当理解，为了精简本公开并帮助理解各个发明方面中的一个或多个，在上面对本发明的示例性实施例的描述中，本发明的各个特征有时被一起分组到单个实施例、图、或者对其的描述中。然而，并不应将该公开的方法解释成反映如下意图：即所要求保护的本发明要求比在每个权利要求中所明确记载的特征更多特征。更确切地说，如下面的权利要求书所反映的那样，发明方面在于少于前面公开的单个实施例的所有特征。因此，遵循具体实施方式的权利要求书由此明确地并入该具体实施方式，其中每个权利要求本身都作为本发明的单独实施例。

本领域那些技术人员应当理解在本文所公开的示例中的设备的模块或单元或组件可以布置在如该实施例中所描述的设备中，或者可替换地可以定位在与该示例中的设备不同的一个或多个设备中。前述示例中的模块可以组合为一个模块或者此外可以分成多个子模块。

本领域那些技术人员可以理解，可以对实施例中的设备中的模块进行自适应性地改变并且把它们设置在与该实施例不同的一个或多个设备中。可以把实施例中的模块或单元或组件组合成一个模块或单元或组件，以及此外可以把它们分成多个子模块或子单元或子组件。除了这样的特征和/或过程或者单元中的至少一些是相互排斥之外，可以采用任何组合对本说明书(包括伴随的权利要求、摘要和附图)中公开的所有特征以及如此公开的任何方法或者设备的所有过程或单元进行组合。除非另外明确陈述，本说明书(包括伴随的权利要求、摘要和附图)中公开的每个特征可以由提供相同、等同或相似目的的替代特征来代替。

此外，本领域的技术人员能够理解，尽管在此所述的一些实施例包括其它实施例中所包括的某些特征而不是其它特征，但是不同实施例的特征的组合意味着处于本发明的范围之内并且形成不同的实施例。例如，在下面的权利要求书中，所要求保护的实施例的任意之一都可以以任意的组合方式来使用。

此外，所述实施例中的一些在此被描述成可以由计算机系统的处理器或者由执行所述功能的其它装置实施的方法或方法元素的组合。因此，具有用于实施所述方法或方法元素的必要指令的处理器形成用于实施该方法或方法元素的装置。此外，装置实施例的在此所述的元素是如下装置的例子：该装置用于实施由为了实施该发明的目的的元素所执行的功能。

如在此所使用的那样，除非另行规定，使用序数词“第一”、“第二”、“第三”等等来描述普通对象仅仅表示涉及类似对象的不同实例，并且并不意图暗示这样被描述的对象必须具有时间上、空间上、排序方面或者以任意其它方式的给定顺序。

尽管根据有限数量的实施例描述了本发明，但是受益于上面的描述，本技术领域内的技术人员明白，在由此描述的本发明的范围内，可以设想其它实施例。此外，应当注意，本说明书中使用的语言主要是为了可读性和教导的目的而选择的，而不是为了解释或者限定本发明的主题而选择的。因此，在不偏离所附权利要求书的范围和精神的情况下，对于本技术领域的普通技术人员来说许多修改和变更都是显而易见的。对于本发明的范围，对本发明所做的公开是说明性的而非限制性的，本发明的范围由所附权利要求书限定。

Claims (10)

1.一种页面布局方法，在计算设备中执行，所述页面包括多个元素行，每个元素行包括至少一个元素，所述页面中的元素采用横向浮动布局进行展示，并采用预设的边距与相邻元素隔开，所述方法包括：

获取页面中的元素，并确定每个元素在所述页面中的初始位置；

依次对每一个元素执行以下处理步骤：

判断当前元素是否为非首行的第一个元素，其中，所述非首行为所述页面中除第一个元素行之外的元素行；

若当前元素为非首行的第一个元素，则判断当前元素是否因边距而被换行，若是，则减小当前元素的边距，以使该元素由当前元素行的第一个元素调整为上一元素行的最后一个元素；以及

根据当前元素的调整结果，重新确定后续元素在所述页面中的位置；

其中，所述判断当前元素是否为非首行的第一个元素包括：获取当前元素的左边到页面左边的距离，记为当前距离，获取上一个元素的左边到页面左边的距离，记为上一距离，若当前距离小于上一距离，则当前元素为非首行的第一个元素；

其中，所述判断当前元素是否因边距而被换行包括：获取上一个元素的左边到页面左边的距离、上一个元素的宽度、上一个元素的边距、当前元素的宽度以及页面内边距，若五者之和小于等于页面总宽度，则当前元素是因边距而被换行。

2.如权利要求1所述的方法，其中，所述减小当前元素的边距的步骤包括：将当前元素的边距设置为0。

3.如权利要求1所述的方法，其中，所述元素对应于一个CSS盒模型，元素的边距通过margin-right属性值来设置。

4.如权利要求1的方法，其中，若当前元素不是非首行的第一个元素，则继续对下一个元素进行处理。

5.如权利要求1所述的方法，其中，当最后一个元素完成处理后，绘制所述页面，以将所述页面呈现在所述计算设备的屏幕上。

6.如权利要求1-5中任一项所述的方法，在页面尺寸发生变化或元素发生变化时被触发执行。

7.如权利要求6所述的方法，在页面尺寸变化的过程中，按照预设频率被触发执行。

8.如权利要求6所述的方法，在页面尺寸变化完成后，响应于用户发出的页面布局命令而被触发执行。

9.一种计算设备，包括：

至少一个处理器和存储有程序指令的存储器；

当所述程序指令被所述处理器读取并执行时，使得所述计算设备执行如权利要求1-8中任一项所述的页面布局方法。

10.一种存储有程序指令的可读存储介质，当所述程序指令被计算设备读取并执行时，使得所述计算设备执行如权利要求1-8中任一项所述的页面布局方法。

Images