CN103970894B - 自适应调整的界面流式布局显示的方法和系统 - Google Patents

Abstract

本申请公开了自适应调整的界面流式布局显示的方法和系统，方法包括：检测运行该浏览器的终端系统的分辨率值；根据分辨率值，将在页面中预先设定像素值的单元格构建成竖向排列且布满页面的栅格；读取栅格横向方向的总像素值，并结合预置的视频缩略图的基准显示列数与栅格横向方向总像素值的对应关系，调整视频缩略图和视频分类标签的尺寸；在栅格上将调整后的视频分类标签和视频缩略图以横向排列方式构成多个横向平行设置的视频分类行进行显示。本发明解决了页面中视频缩略的布局散乱且视频缩略图尺寸在较高分辨率下产生缩减的问题。

Description

自适应调整的界面流式布局显示的方法和系统

技术领域

本申请涉及界面布局显示领域，更具体地，涉及一种自适应调整的界面流式布局显示的方法和系统。

背景技术

随着互联网技术的快速发展，人们获取信息的方式已经发生改变：从传统的书籍、报纸、电视、广播等方式，继而变成通过互联网获取。尤其是互联网将影视节目、新闻、广告、聊天视频、游戏视频和监控视频等等丰富的综合性网络视频资源进行共享，从而网络视频已经成为人们学习、社交以及休闲娱乐而不可替代的重要方式。

目前的网站，尤其是视频网站负责为用户提供丰富的视频资源，用户可以通过终端上的浏览器进行访问视频网站的点播页面，观看用户想要观看的各类视频。

通常，点播页面上的大量视频资源都以具有代表性的视频截图形成视频缩略图的方式进行展现，这样，用户通过视频缩略图可以直观、清楚的了解相应的视频资源的大致内容，从而增加了用户的浏览体验感受。

现有技术中，点播页面中的视频缩略图的排列方式虽然会按照不同的分类进行排列（如按照电影、电视剧、新闻、体育等方式排列分类），但是排列的归属性不强，整体较散乱。

而且，重要的是，用户访问网站时所使用的终端的屏幕分辨率各不相同，在终端屏幕固定的情况下，其分辨率越高，显示的精度就越高，分辨率高的屏幕可以显示更多内容，相应带来的显示效果是显示内容尺寸大小的缩减，导致视频缩略图密集显示在页面中，造成观看不适，严重影响用户的浏览体验。

发明内容

有鉴于此，本申请所要解决的技术问题是提供了一种自适应调整的界面流式布局显示的方法和系统，以解决页面中视频缩略的布局散乱且视频缩略图尺寸在较高分辨率下产生缩减的问题。

为了解决上述技术问题，本申请公开了一种自适应调整的界面流式布局显示的方法，其特征在于，包括：

检测运行该浏览器的终端系统的分辨率值；

根据所述分辨率值，将在所述页面中预先设定像素值的单元格构建成竖向排列且布满所述页面的栅格；

读取所述栅格横向方向的总像素值，并结合预置的视频缩略图的基准显示列数与所述栅格横向方向总像素值的对应关系，调整所述视频缩略图和视频分类标签的尺寸；

在所述栅格上将调整后的所述视频分类标签和视频缩略图以横向排列方式构成多个横向平行设置的视频分类行进行显示。

优选地，其中，预置的视频缩略图的基准显示列数与所述栅格横向方向总像素值的对应关系，进一步为：在不同的屏幕尺寸数值下以长度为1024像素的分辨率值为基准值，划定所述页面中所述视频缩略图的基准显示列数，并以该基准显示列数为定值获取不同分辨率值下所述视频缩略图的尺寸比例，建立所述视频缩略图的该基准显示列数与所述栅格横向方向总像素值的对应关系。

优选地，其中，读取所述栅格横向方向的总像素值，并结合预置的视频缩略图的基准显示列数与所述栅格横向方向总像素值的对应关系，调整所述视频缩略图和视频分类标签的尺寸，进一步为：读取所述栅格横向方向的总像素值，保持所述视频缩略图的基准显示列数不变，获取该总像素值下所述视频缩略图的横向长度像素尺寸，并根据所述视频缩略图固定的长宽像素比例，调整所述视频缩略图的尺寸，以及根据所述视频分类标签与所述视频缩略图的尺寸对应关系，调整所述视频分类标签的尺寸。

优选地，其中，调整后的所述视频分类标签和视频缩略图的实际尺寸大于调整前的所述视频分类标签和视频缩略图的实际尺寸。

优选地，其中，在所述栅格上将调整后的所述视频分类标签和视频缩略图以横向排列方式构成多个横向平行设置的视频分类行进行显示，进一步为：在所述栅格上将调整后的所述视频分类标签置于最左侧，将对应该视频标签的调整后的所述视频缩略图按照从左至右的方式依次横向排列于所述视频标签右侧，构成多个横向平行设置的火车流形式的视频分类行进行显示。

为了解决上述技术问题，本申请还公开了一种自适应调整的界面流式布局显示的系统，与浏览器相耦接，其特征在于，该系统包括：检测单元、栅格单元、调整单元以及布局单元，其中，

所述检测单元，用于检测运行该浏览器的终端系统的分辨率值；

所述栅格单元，用于根据所述分辨率值，将在所述页面中预先设定像素值的单元格构建成竖向排列且布满所述页面的栅格；

所述调整单元，用于读取所述栅格横向方向的总像素值，并结合预置的视频缩略图的基准显示列数与所述栅格横向方向总像素值的对应关系，调整所述视频缩略图和视频分类标签的尺寸；

所述布局单元，用于在所述栅格上将调整后的所述视频分类标签和视频缩略图以横向排列方式构成多个横向平行设置的视频分类行进行显示。

优选地，其中，预置的视频缩略图的基准显示列数与所述栅格横向方向总像素值的对应关系，进一步为：在不同的屏幕尺寸数值下以长度为1024像素的分辨率值为基准值，划定所述页面中所述视频缩略图的基准显示列数，并以该基准显示列数为定值获取不同分辨率值下所述视频缩略图的尺寸比例，建立所述视频缩略图的该基准显示列数与所述栅格横向方向总像素值的对应关系。

优选地，其中，所述调整单元，进一步用于：读取所述栅格横向方向的总像素值，保持所述视频缩略图的基准显示列数不变，获取该总像素值下所述视频缩略图的横向长度像素尺寸，并根据所述视频缩略图固定的长宽像素比例，调整所述视频缩略图的尺寸，以及根据所述视频分类标签与所述视频缩略图的尺寸对应关系，调整所述视频分类标签的像素尺寸尺寸。

优选地，其中，调整后的所述视频分类标签和视频缩略图的实际尺寸大于调整前的所述视频分类标签和视频缩略图的实际尺寸。

优选地，其中，所述布局单元，进一步用于：在所述栅格上将调整后的所述视频分类标签置于最左侧，将对应该视频标签的调整后的所述视频缩略图按照从左至右的方式依次横向排列于所述视频标签右侧，构成多个横向平行设置的火车流形式的视频分类行进行显示。

与现有技术相比，本申请所述的一种自适应调整的界面流式布局显示的方法和系统，达到了如下效果：

1）本申请通过根据在页面显示前所检测到的屏幕的分辨率，将在页面中预置的单元格构成符合当前分辨率的不同尺寸的视频分类标签及视频缩略图，并进行火车流式的排列显示，即使在分辨率发生变化时，构成的视频分类标签及视频缩略图也可以根据变化后的分辨率进行尺寸大小的调整，当用户浏览观看时，视频分类标签及视频缩略图不会因为分辨率的增加导致尺寸大小的缩减，有效解决了页面中视频缩略的布局散乱且视频缩略图尺寸在较高分辨率下产生缩减的问题。

2）本申请中的单元格的宽度像素值可以增强页面的显示效果，由该单元格构成的栅格上可以良好的划分成不同的显示区域，在栅格上设置的显示内容（包括：视频分类标签及视频缩略图）的尺寸大小可以达到最佳的浏览舒适度。

3）本申请所显示的内容（包括：视频分类标签及视频缩略图）按照不同类型横向排列，增加了显示内容的归属性，也增强用户的浏览体验。

当然，实施本申请的任一产品必不一定需要同时达到以上所述的所有技术效果。

附图说明

此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：

图1是本申请实施例一所述的自适应调整的界面流式布局显示的方法的流程框图。

图2是本申请实施例二所述的自适应调整的界面流式布局显示的方法的流程框图。

图3是本申请实施例一、二中单元格及其构成的栅格的示意图。

图4至7是本申请实施例三中所述的自适应调整的界面流式布局显示的方法中视频缩略图和视频分类标签在不同分辨率下的显示示意图。

图8是本申请实施例四所述的自适应调整的界面流式布局显示的系统的结构框图。

具体实施方式

如在说明书及权利要求当中使用了某些词汇来指称特定组件。本领域技术人员应可理解，硬件制造商可能会用不同名词来称呼同一个组件。本说明书及权利要求并不以名称的差异来作为区分组件的方式，而是以组件在功能上的差异来作为区分的准则。如在通篇说明书及权利要求当中所提及的“包含”为一开放式用语，故应解释成“包含但不限定于”。“大致”是指在可接收的误差范围内，本领域技术人员能够在一定误差范围内解决所述技术问题，基本达到所述技术效果。此外，“耦接”一词在此包含任何直接及间接的电性耦接手段。因此，若文中描述一第一装置耦接于一第二装置，则代表所述第一装置可直接电性耦接于所述第二装置，或通过其他装置或耦接手段间接地电性耦接至所述第二装置。说明书后续描述为实施本申请的较佳实施方式，然所述描述乃以说明本申请的一般原则为目的，并非用以限定本申请的范围。本申请的保护范围当视所附权利要求所界定者为准。

实施例一

如图1所示，为本申请实施例一所述的一种自适应调整的界面流式布局显示的方法，该方法包括：

步骤101，检测运行浏览器的终端系统的分辨率值。

用户所使用的屏幕的分辨率大小各不相同，分辨率表示屏幕长度和宽度方向上的像素值，显示于屏幕中的内容（包括：文字、图像等）均由像素点构成，从而，分辨率就反映了在屏幕中显示内容的多少和显示的精度：分辨率越低，显示内容就越少，相应的显示精度越低；反之，显示内容多，显示精度高。

在用户通过终端（包括：计算机终端、移动终端等，在此不作具体限定）上的浏览器访问相应的网站（具体可以是视频网站）时，可以通过浏览器或运行该浏览器的终端系统中的检测线程，获取当前屏幕的分辨率值，在本申请中，获取的分辨率值可以记录于HTML（HyperText Mark-up Language，超文本标记语言）文件或者是符合网络传输通信标准的浏览器信息文件中。对于本领域技术人员来说，这里不作具体限定。

步骤102，根据所述分辨率值，将在所述页面中预先设定像素值的单元格构建成竖向排列且布满所述页面的栅格。

在浏览器页面中所显示的内容，依赖于栅格进行布局设计，形成的栅格为竖直排列的条形结构，如图3所示，栅格并不会在浏览器页面中显示，只作为在浏览器页面显示前进行页面布局调整的参照。栅格由所述单元格构成，由于栅格在竖直方向延伸，所以对栅格在竖直方向上的像素值不作出限定，其在竖直方向上延伸的长度取决于实际应用中页面内容的多少，因此在步骤102中，预先设定的单元格的像素值就是该单元格在水平方向的像素值。根据分辨率值，可获知屏幕在水平方向的具体像素值，再根据水平方向像素值已知的单元格，便可以构成页面中的栅格。

步骤103，读取所述栅格横向方向的总像素值，并结合预置的视频缩略图的基准显示列数与所述栅格横向方向总像素值的对应关系，调整所述视频缩略图和视频分类标签的尺寸。

由于页面中的显示内容（可以包括：图片、视频分类标签、视频缩略图、文字等）均由栅格构成，所述对于步骤103中的栅格横向方向（水平方向）的总像素值，代表了页面在水平方向的实际显示范围，那么，在栅格横向方向的总像素值确定后，页面中可以横向设置视频缩略图、视频分类标签等内容的数量也就确定了。在步骤103中，只需调整视频缩略图和视频分类标签的尺寸即可，如：在横向像素值为1024的分辨率下，调整页面中横向设置的视频缩略图的数量为6个。

步骤104，在所述栅格上将调整后的所述视频分类标签和视频缩略图以横向排列方式构成多个横向平行设置的视频分类行进行显示。

视频分类标签代表了视频内容的所划分的类型，将不同类型的视频汇聚在一起，可以增强用户的体验感，在本实施例中，视频分类标签可以是图片、图标等形式的图形或文字标签。视频分类标签的尺寸通常设置为小于视频缩略图的尺寸，作为一种方式，视频分类标签的长度与宽度的尺寸比例为1:1，视频缩略图的长度与宽度的尺寸比例为16:9。当然上述视频分类标签和视频缩略图的长宽比例可以根据实际应用的需要进行调整，并不构成对本申请的限定。

通过本实施例中的上述步骤101至104，在用户启动浏览器访问相应的网站页面时（在页面显示前），可以根据当前用户所使用的终端系统的分辨率值，对页面中的显示内容进行调整，使页面中的显示内容适应于不同的分辨率值，而且，所显示的内容（如：视频缩略图）按照不同类型横向排列，增加了显示内容的归属性，也增强用户的浏览体验，即在高分辨率的情况下，页面中所显示的内容也不会出现过于缩小而影响浏览效果的情况。

实施例二

如图2所示，为本申请实施例二所述的一种自适应调整的界面流式布局显示的方法，该方法包括：

步骤201，通过浏览器对页面进行显示时，检测运行该浏览器的终端系统的分辨率值以及当前浏览器窗口在最大化尺寸时的像素值。

检测的过程可以开始于启动浏览器的瞬间，浏览器窗口在最大化尺寸时的像素值可以记录于HTML文件中，终端系统的分辨率值可以通过访问当前终端的系统中的显示进程获取得到。对于浏览器窗口在最大化尺寸时的像素值而言，具体是该浏览器窗口在最大化尺寸时横向方向（水平方向的）的像素值。

步骤202，根据所述分辨率值和当前浏览器窗口在最大化尺寸时的像素值，将在所述页面中预先设定像素值的单元格A构建成竖向排列且布满所述页面的栅格。

其中，栅格由所述单元格构成，由于栅格在竖直方向延伸，所以对栅格在竖直方向上的像素值不需作出限定，其在竖直方向上延伸的长度取决于实际应用中页面内容的多少，与分辨率值不相关，那么在步骤202中，与分辨率值相关的是横向方向（水平方向）的像素值，所以预先设定的单元格的像素值就是该单元格在水平方向的像素值。如图3所示，单元格A（在本实施例中，也可称为栅格单元格）由像素宽度为35px（像素）的a部分和像素宽度为10px的i部分构成，i部分位于a部分两侧，单元格A的像素宽度为55px，在图3中，在不同的分辨率下，由该单元格A可以排列构成具有不同像素宽度的栅格。例如，在水平方向为1366px以下的分辨率值下，栅格的像素宽度为990px；在水平方向为1366px以上的分辨率值下，栅格的像素宽度为990px。

作为本实施例中的另一种方式，当屏幕分辨率出现大幅度增加时，如：分辨率提升至4K级（4096px×2160px）的分辨率时，如图3所示，单元格A的a和i两部分均增加3倍。当然，对于单元格A的倍数改变还可以是其他方式，并不作为对本申请的限定。

需要说明的是，本实施例中的单元格A的像素宽度可以使页面的效果达到最佳，当然，栅格并不直接显示于页面中，而是作为后续显示内容调整的基准参照。

步骤203，读取由单元格A所构成的栅格在横向方向上的总像素值，并结合预置的视频缩略图的基准显示列数与所述栅格横向方向总像素值的对应关系，调整所述视频缩略图和视频分类标签的尺寸。

其中，预置的视频缩略图的基准显示列数与所述栅格横向方向总像素值的对应关系，具体为：在不同的屏幕尺寸数值下以长度为1024像素的分辨率值为基准值，划定所述页面中所述视频缩略图的基准显示列数，并以该基准显示列数为定值获取不同分辨率值下所述视频缩略图的尺寸比例，建立所述视频缩略图的该基准显示列数与所述栅格横向方向总像素值的对应关系。

对于不同的屏幕尺寸而言，尤其是较大尺寸的屏幕中，若以长度为1024像素的分辨率以下的分辨率进行显示，其显示效果较差，所以在本实施例中以长度为1024像素（可以称为基准像素）的分辨率值为基准值（即最低值），划定页面中视频缩略图的显示列数为基准列数（如：6列，即在当前页面中可以横向排列设置6个不同的视频缩略图），那么在当前分辨率下横向排列6个视屏缩略图，可以基本保证用户的浏览体验。

对于步骤203而言，一旦确定了页面中视频缩略图的显示列数为基准列数，那么在分辨率改变时（分辨率增加，大于1024像素），通过调整视频缩略图和视频分类标签的尺寸，保证页面中仍横向排列设置6个不同的视频缩略图，即视频缩略图的基准显示列数不变。

另外，在步骤203中，读取所述栅格横向方向的总像素值，并结合预置的视频缩略图的基准显示列数与所述栅格横向方向总像素值的对应关系，调整所述视频缩略图和视频分类标签的尺寸，具体为：读取所述栅格横向方向的总像素值，保持所述视频缩略图的基准显示列数不变，获取该总像素值下所述视频缩略图的横向长度像素尺寸，并根据所述视频缩略图固定的长宽像素比例，调整所述视频缩略图的尺寸，以及根据所述视频分类标签与所述视频缩略图的尺寸对应关系，调整所述视频分类标签的尺寸。

在分辨率改变的情况下（尤其在分辨率增加，大于1024像素时），调整后的视频分类标签和视频缩略图与调整前的所述视频分类标签和视频缩略图的物理显示尺寸基本保持一致。其中的物理显示尺寸，是指视频分类标签或视频缩略图，在同一屏幕下（不同分辨率）显示的尺寸大小，即对用户而言，几乎看不出视频分类标签或视频缩略图的尺寸的改变。几乎看不出，因为实际情况是不能达到完美的物理尺寸的一直，只能近似

步骤204，在由单元格A所构成的栅格上将调整后的所述视频分类标签置于最左侧，将对应该视频标签的调整后的所述视频缩略图按照从左至右的方式依次横向排列于所述视频标签右侧，构成多个横向平行设置的火车流形式的视频分类行进行显示。

在本实施例中，位于最左侧的视频分类标签也可以采用悬浮式的显示方式，即当某一视频分类标签对应的视频缩略图过多时（如：视频缩略图排列了多行），用户在页面中进行滚动操作，该视频分类标签保持悬浮（相对于页面的位置不变），其对应的视频缩略图跟随页面进行滚动，这样，用户便可以充分浏览在该视频分类标签中的内容，同时，悬浮式的视频分类标签也保证了用户的浏览位置不丢失。用户继续滚动页面使该视频分类标签中的视频缩略图滚动至浏览窗口外时，该视频分类标签也跟随滚动至浏览窗口外，以便用户继续浏览页面中的其余内容。

当一个分类标签的视频内容过多时，用户在滚动页面是视频内容移动，分类标签可悬浮，这样用户位置不会丢失，当视频内容滚动出浏览器外分类标签也滚动出浏览器外。

实施例三

下面结合图4-8，对所述自适应调整的界面流式布局显示的方法的具体应用进行详细说明：

步骤一，当用户通过浏览器对页面进行显示时，检测运行该浏览器的终端系统的分辨率值在横向方向的像素值为1024px，同时检测当前浏览器窗口在最大化尺寸时横向方向的像素值为1003px。

步骤二，如图4所示，根据1024px的分辨率值和当前浏览器窗口在最大化尺寸时的像素值1003px，将预先设定的像素宽度为55px的单元格A作为基准尺寸构建成竖向排列且布满所述页面的栅格。

其中，在页面中构成的栅格在横向方向上的总像素值为990px，实际可视区域S3的宽度为970px，当然，图4中的栅格并不会直接显示与页面中，即用户不可见。在图4中，区域S1的宽度像素值为640px的阴影部分为视频缩略图和视频分类标签的显示区域，区域S2的宽度像素值为310px的阴影部分为相关视频（可以包括：以缩略图或文字形式的推荐视频、热点视频、排行旁等相关视频信息）的显示区域。当然，上述S1至S3的像素值将根据不同的屏幕分辨率值而改变，在本申请中不再另作图示出。

步骤三，如图5所示，在当前1024分辨率下，划定栅格中的视频缩略图和视频分类标签的基准显示列数，读取由像素宽度为55px的单元格A所构成的栅格在横向方向上的总像素值，调整视频缩略图和视频分类标签的尺寸。

图5中的视频分类标签的长度与宽度的尺寸比例为1:1，视频缩略图的长度与宽度的尺寸比例为16:9，在横向方向上，可以排列设置6个视频缩略图。

步骤四，在由像素宽度为55px的单元格A所构成的栅格上将调整后的所述视频分类标签置于最左侧，如图5所示，同时，将对应该视频标签的调整后的所述视频缩略图按照从左至右的方式依次横向排列于所述视频标签右侧，构成多个横向平行设置的火车流形式的视频分类行进行显示。

如果，此时用户调整其屏幕的分辨率或使用不同的终端浏览网页（但该终端上的分辨率发生了改变），假设分辨率从1024改变至1280，此时，浏览器将重复执行上述步骤：

步骤I，检测运行该浏览器的终端系统的分辨率值在横向方向的像素值为1280px，同时检测当前浏览器窗口在最大化尺寸时横向方向的像素值为1259px。

步骤II，根据1280px的分辨率值和当前浏览器窗口在最大化尺寸时的像素值1259px，将预先设定的像素宽度为55px的单元格A作为基准尺寸构建成竖向排列且布满所述页面的栅格。

其中，在页面中构成的栅格在横向方向上的总像素值为1210px，实际可视宽度为1190px，宽度像素值为860px的阴影部分为视频缩略图和视频分类标签的显示区域，宽度像素值为310px的阴影部分为相关视频的显示区域。

步骤三，如图6所示，在当前1280分辨率下，划定栅格中的视频缩略图和视频分类标签的基准显示列数，读取由像素宽度为55px的单元格A所构成的栅格在横向方向上的总像素值，调整视频缩略图和视频分类标签的尺寸。

步骤四，在由像素宽度为55px的单元格A所构成的栅格上将调整后的所述视频分类标签置于最左侧，如图6所示，同时，将对应该视频标签的调整后的所述视频缩略图按照从左至右的方式依次横向排列于所述视频标签右侧，构成多个横向平行设置的火车流形式的视频分类行进行显示。

图6中的视频分类标签和视频缩略图的长宽尺寸比例与图5中一致，但实际上，视频分类标签和视频缩略图的尺寸大小发生了改变，均变大，以此来抵消由于分辨率的增加所产生的显示内容缩减效应，即保持了物理显示尺寸基本不变，相对于用户，视频分类标签和视频缩略图的尺寸几乎未发生变化。

在本实施例中，最终的显示效果如图7所示，不同类别的视频缩略图跟随在相应的视频分类标签之后，形成火车流式的排列布局，每一行火车流排列的右侧显示相关的推荐视频或排行，增加了视频的归类性，增加了用户的浏览体验，如上述实施例二中的记载，作为一种实现方式，位于最左侧的视频分类标签也可以采用悬浮式的显示方式，即当某一视频分类标签对应的视频缩略图过多时（如：视频缩略图排列了多行），用户在页面中进行滚动操作，该视频分类标签保持悬浮（相对于页面的位置不变），其对应的视频缩略图跟随页面进行滚动，这样，用户便可以充分浏览在该视频分类标签中的内容，同时，悬浮式的视频分类标签也保证了用户的浏览位置不丢失。用户继续滚动页面使该视频分类标签中的视频缩略图滚动至浏览窗口外时，该视频分类标签也跟随滚动至浏览窗口外，以便用户继续浏览页面中的其余内容，增加了用户的浏览体验。

实施例四

如图8所示，为本申请实施例四所述的一种自适应调整的界面流式布局显示的系统，与浏览器相耦接，该系统包括：检测单元801、栅格单元802、调整单元803以及布局单元804，其中，

所述检测单元801，用于检测运行该浏览器的终端系统的分辨率值。

所述栅格单元802，用于根据所述分辨率值，将在所述页面中预先设定像素值的单元格构建成竖向排列且布满所述页面的栅格。

需要说明的是，本实施例中的单元格的像素宽度可以使页面的效果达到最佳，当然，栅格并不直接显示于页面中，而是作为后续显示内容调整的基准参照。

所述调整单元803，用于读取所述栅格横向方向的总像素值，并结合预置的视频缩略图的基准显示列数与所述栅格横向方向总像素值的对应关系，调整所述视频缩略图和视频分类标签的尺寸。

所述布局单元804，用于在所述栅格上将调整后的所述视频分类标签和视频缩略图以横向排列方式构成多个横向平行设置的视频分类行进行显示。

本实施例中，栅格由单元格构成，由于栅格在竖直方向延伸，所以对栅格在竖直方向上的像素值不需作出限定，其在竖直方向上延伸的长度取决于实际应用中页面内容的多少，与分辨率值不相关，那么对于栅格单元802，与分辨率值相关的是横向方向（水平方向）的像素值，所以预先设定的单元格的像素值就是该单元格在水平方向的像素值。如图3所示，单元格A（在本实施例中，也可称为栅格单元格）由像素宽度为35px（像素）的a部分和像素宽度为10px的i部分构成，i部分位于a部分两侧，单元格A的像素宽度为55px，在图3中，在不同的分辨率下，由该单元格A可以排列构成具有不同像素宽度的栅格。例如，在图3中，在水平方向为1366px以下的分辨率值下，栅格的像素宽度为990px；在水平方向为1366px以上的分辨率值下，栅格的像素宽度为990px。

对于调整单元803而言，预置的视频缩略图的基准显示列数与所述栅格横向方向总像素值的对应关系，具体为：在不同的屏幕尺寸数值下以长度为1024像素的分辨率值为基准值，划定所述页面中所述视频缩略图的基准显示列数，并以该基准显示列数为定值获取不同分辨率值下所述视频缩略图的尺寸比例，建立所述视频缩略图的该基准显示列数与所述栅格横向方向总像素值的对应关系。

在分辨率改变的情况下（尤其在分辨率增加，大于1024像素时），调整后的视频分类标签和视频缩略图与调整前的所述视频分类标签和视频缩略图的物理显示尺寸基本一致。其中的物理显示尺寸，是指视频分类标签或视频缩略图，在同一屏幕下（不同分辨率）显示的尺寸大小，即对用户而言，几乎看不出视频分类标签或视频缩略图的尺寸的改变。

调整单元803，具体用于：读取所述栅格横向方向的总像素值，保持所述视频缩略图的基准显示列数不变，获取该总像素值下所述视频缩略图的横向长度像素尺寸，并根据所述视频缩略图固定的长宽像素比例，调整所述视频缩略图的尺寸，以及根据所述视频分类标签与所述视频缩略图的尺寸对应关系，调整所述视频分类标签的尺寸。

其中，视频分类标签代表了视频内容的所划分的类型，将不同类型的视频汇聚在一起，可以增强用户的体验感，在本实施例中，视频分类标签可以是图片、图标等形式的图形或文字标签。视频分类标签的尺寸通常设置为小于视频缩略图的尺寸，作为一种方式，视频分类标签的长度与宽度的尺寸比例为1:1，视频缩略图的长度与宽度的尺寸比例为16:9。当然上述视频分类标签和视频缩略图的长宽比例可以根据实际应用的需要进行调整，并不构成对本申请的限定。

所述布局单元804，具体用于：在所述栅格上将调整后的所述视频分类标签置于最左侧，将对应该视频标签的调整后的所述视频缩略图按照从左至右的方式依次横向排列于所述视频标签右侧，构成多个横向平行设置的火车流形式的视频分类行进行显示。

通过本实施例中的上述系统，在用户启动浏览器访问相应的网站页面时（在页面显示前），可以根据当前用户所使用的终端系统的分辨率值，对页面中的显示内容进行调整，使页面中的显示内容适应于不同的分辨率值，而且，所显示的内容（如：视频缩略图）按照不同类型横向排列，增加了显示内容的归属性，也增强用户的浏览体验，即在高分辨率的情况下，页面中所显示的内容也不会出现过于缩小而影响浏览效果的情况。

由于方法部分已经对本申请实施例进行了详细描述，这里对实施例中涉及的系统与方法对应部分的展开描述省略，不再赘述。对于系统中具体内容的描述可参考方法实施例的内容，这里不再具体限定。

与现有技术相比，本申请所述的一种自适应调整的界面流式布局显示的方法和系统，达到了如下效果：

1）本申请通过根据在页面显示前所检测到的屏幕的分辨率，将在页面中预置的单元格构成符合当前分辨率的不同尺寸的视频分类标签及视频缩略图，并进行火车流式的排列显示，即使在分辨率发生变化时，构成的视频分类标签及视频缩略图也可以根据变化后的分辨率进行尺寸大小的调整，当用户浏览观看时，视频分类标签及视频缩略图不会因为分辨率的增加导致尺寸大小的缩减，有效解决了页面中视频缩略的布局散乱且视频缩略图尺寸在较高分辨率下产生缩减的问题。

2）本申请中的单元格的宽度像素值可以增强页面的显示效果，由该单元格构成的栅格上可以良好的划分成不同的显示区域，在栅格上设置的显示内容（包括：视频分类标签及视频缩略图）的尺寸大小可以达到最佳的浏览舒适度。

3）本申请所显示的内容（包括：视频分类标签及视频缩略图）按照不同类型横向排列，增加了显示内容的归属性，也增强用户的浏览体验。

还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者系统不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者系统所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、商品或者系统中还存在另外的相同要素。

本领域技术人员应明白，本申请的实施例可提供为方法、系统或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质（包括但不限于磁盘存储器、CD-ROM、光学存储器等）上实施的计算机程序产品的形式。

以上所述仅为本申请的实施例而已，并不用于限制本申请。对于本领域技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本申请的权利要求范围之内。

Claims (6)

1.一种自适应调整的界面流式布局显示的方法，其特征在于，包括：

检测运行浏览器的终端系统的分辨率值；

根据所述分辨率值，将在页面中预先设定像素值的单元格构建成竖向排列且布满所述页面的栅格，当屏幕分辨率值出现大幅增加时，栅格单元均相应的增加；

读取所述栅格横向方向的总像素值，并在不同的屏幕尺寸数值下以长度为1024像素的分辨率值为基准值，划定所述页面中视频缩略图的基准显示列数，并以该基准显示列数为定值获取不同分辨率值下所述视频缩略图的尺寸比例，建立所述视频缩略图的该基准显示列数与所述栅格横向方向总像素值的对应关系，根据所述对应关系调整所述视频缩略图和视频分类标签的尺寸；

在所述栅格上将调整后的所述视频分类标签和视频缩略图以横向排列方式构成多个横向平行设置的视频分类行进行显示；进一步为：在所述栅格上将调整后的所述视频分类标签置于最左侧，将对应该视频标签的调整后的所述视频缩略图按照从左至右的方式依次横向排列于所述视频标签右侧，构成多个横向平行设置的火车流形式的视频分类行进行显示。

2.如权利要求1所述的自适应调整的界面流式布局显示的方法，其特征在于，

读取所述栅格横向方向的总像素值，并在不同的屏幕尺寸数值下以长度为1024像素的分辨率值为基准值，划定所述页面中所述视频缩略图的基准显示列数，并以该基准显示列数为定值获取不同分辨率值下所述视频缩略图的尺寸比例，建立所述视频缩略图的该基准显示列数与所述栅格横向方向总像素值的对应关系，根据所述对应关系调整所述视频缩略图和视频分类标签的尺寸，进一步为：读取所述栅格横向方向的总像素值，保持所述视频缩略图的基准显示列数不变，获取该总像素值下所述视频缩略图的横向长度像素尺寸，并根据所述视频缩略图固定的长宽像素比例，调整所述视频缩略图的尺寸，以及根据所述视频分类标签与所述视频缩略图的尺寸对应关系，调整所述视频分类标签的尺寸。

3.如权利要求2中所述的自适应调整的界面流式布局显示的方法，其特征在于，

调整后的所述视频分类标签和视频缩略图的实际尺寸大于调整前的所述视频分类标签和视频缩略图的实际尺寸。

4.一种自适应调整的界面流式布局显示的系统，与浏览器相耦接，其特征在于，该系统包括：检测单元、栅格单元、调整单元以及布局单元，其中，

所述检测单元，用于检测运行浏览器的终端系统的分辨率值；

所述栅格单元，用于根据所述分辨率值，将在页面中预先设定像素值的单元格构建成竖向排列且布满所述页面的栅格，当屏幕分辨率值出现大幅增加时，栅格单元均相应的增加；

所述调整单元，用于读取所述栅格横向方向的总像素值，在不同的屏幕尺寸数值下以长度为1024像素的分辨率值为基准值，划定所述页面中视频缩略图的基准显示列数，并以该基准显示列数为定值获取不同分辨率值下所述视频缩略图的尺寸比例，建立所述视频缩略图的该基准显示列数与所述栅格横向方向总像素值的对应关系，根据所述对应关系调整所述视频缩略图和视频分类标签的尺寸；

所述布局单元，用于在所述栅格上将调整后的所述视频分类标签和视频缩略图以横向排列方式构成多个横向平行设置的视频分类行进行显示；进一步用于：在所述栅格上将调整后的所述视频分类标签置于最左侧，将对应该视频标签的调整后的所述视频缩略图按照从左至右的方式依次横向排列于所述视频标签右侧，构成多个横向平行设置的火车流形式的视频分类行进行显示。

5.如权利要求4所述的自适应调整的界面流式布局显示的系统，其特征在于，

所述调整单元，进一步用于：读取所述栅格横向方向的总像素值，保持所述视频缩略图的基准显示列数不变，获取该总像素值下所述视频缩略图的横向长度像素尺寸，并根据所述视频缩略图固定的长宽像素比例，调整所述视频缩略图的尺寸，以及根据所述视频分类标签与所述视频缩略图的尺寸对应关系，调整所述视频分类标签的像素尺寸。

6.如权利要求5中所述的自适应调整的界面流式布局显示的系统，其特征在于，

调整后的所述视频分类标签和视频缩略图的实际尺寸大于调整前的所述视频分类标签和视频缩略图的实际尺寸。