[发明专利]自适应调整的界面流式布局显示的方法和系统

说明书

技术领域

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

背景技术

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

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

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

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

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

发明内容

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

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

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

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

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

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

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

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

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

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

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

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

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

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