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

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

【技术实现步骤摘要】
自适应调整的界面流式布局显示的方法和系统
本申请涉及界面布局显示领域，更具体地，涉及一种自适应调整的界面流式布局显示的方法和系统。
技术介绍
随着互联网技术的快速发展，人们获取信息的方式已经发生改变：从传统的书籍、报纸、电视、广播等方式，继而变成通过互联网获取。尤其是互联网将影视节目、新闻、广告、聊天视频、游戏视频和监控视频等等丰富的综合性网络视频资源进行共享，从而网络视频已经成为人们学习、社交以及休闲娱乐而不可替代的重要方式。目前的网站，尤其是视频网站负责为用户提供丰富的视频资源，用户可以通过终端上的浏览器进行访问视频网站的点播页面，观看用户想要观看的各类视频。通常，点播页面上的大量视频资源都以具有代表性的视频截图形成视频缩略图的方式进行展现，这样，用户通过视频缩略图可以直观、清楚的了解相应的视频资源的大致内容，从而增加了用户的浏览体验感受。现有技术中，点播页面中的视频缩略图的排列方式虽然会按照不同的分类进行排列（如按照电影、电视剧、新闻、体育等方式排列分类），但是排列的归属性不强，整体较散乱。而且，重要的是，用户访问网站时所使用的终端的屏幕分辨率各不相同，在终端屏幕固定的情况下，其分辨率越高，显示的精度就越高，分辨率高的屏幕可以显示更多内容，相应带来的显示效果是显示内容尺寸大小的缩减，导致视频缩略图密集显示在页面中，造成观看不适，严重影响用户的浏览体验。
技术实现思路
有鉴于此，本申请所要解决的技术问题是提供了一种自适应调整的界面流式布局显示的方法和系统，以解决页面中视频缩略的布局散乱且视频缩略图尺寸在较高分辨率下产生缩减的问题。为了解决上述技术问题，本申请公开了一种自适应调整的界面流式布局显示的方法，其特征在于，包括：检测运行该浏览器的终端系统的分辨率值；根据所述分辨率值，将在所述页面中预先设定像素值的单元格构建成竖向排列且布满所述页面的栅格；读取所述栅格横向方向的总像素值，并结合预置的视频缩略图的基准显示列数与所述栅格横向方向总像素值的对应关系，调整所述视频缩略图和视频分类标签的尺寸；在所述栅格上将调整后的所述视频分类标签和视频缩略图以横向排列方式构成多个横向平行设置的视频分类行进行显示。优选地，其中，预置的视频缩略图的基准显示列数与所述栅格横向方向总像素值的对应关系，进一步为：在不同的屏幕尺寸数值下以长度为1024像素的分辨率值为基准值，划定所述页面中所述视频缩略图的基准显示列数，并以该基准显示列数为定值获取不同分辨率值下所述视频缩略图的尺寸比例，建立所述视频缩略图的该基准显示列数与所述栅格横向方向总像素值的对应关系。优选地，其中，读取所述栅格横向方向的总像素值，并结合预置的视频缩略图的基准显示列数与所述栅格横向方向总像素值的对应关系，调整所述视频缩略图和视频分类标签的尺寸，进一步为：读取所述栅格横向方向的总像素值，保持所述视频缩略图的基准显示列数不变，获取该总像素值下所述视频缩略图的横向长度像素尺寸，并根据所述视频缩略图固定的长宽像素比例，调整所述视频缩略图的尺寸，以及根据所述视频分类标签与所述视频缩略图的尺寸对应关系，调整所述视频分类标签的尺寸。优选地，其中，调整后的所述视频分类标签和视频缩略图的实际尺寸大于调整前的所述视频分类标签和视频缩略图的实际尺寸。优选地，其中，在所述栅格上将调整后的所述视频分类标签和视频缩略图以横向排列方式构成多个横向平行设置的视频分类行进行显示，进一步为：在所述栅格上将调整后的所述视频分类标签置于最左侧，将对应该视频标签的调整后的所述视频缩略图按照从左至右的方式依次横向排列于所述视频标签右侧，构成多个横向平行设置的火车流形式的视频分类行进行显示。为了解决上述技术问题，本申请还公开了一种自适应调整的界面流式布局显示的系统，与浏览器相耦接，其特征在于，该系统包括：检测单元、栅格单元、调整单元以及布局单元，其中，所述检测单元，用于检测运行该浏览器的终端系统的分辨率值；所述栅格单元，用于根据所述分辨率值，将在所述页面中预先设定像素值的单元格构建成竖向排列且布满所述页面的栅格；所述调整单元，用于读取所述栅格横向方向的总像素值，并结合预置的视频缩略图的基准显示列数与所述栅格横向方向总像素值的对应关系，调整所述视频缩略图和视频分类标签的尺寸；所述布局单元，用于在所述栅格上将调整后的所述视频分类标签和视频缩略图以横向排列方式构成多个横向平行设置的视频分类行进行显示。优选地，其中，预置的视频缩略图的基准显示列数与所述栅格横向方向总像素值的对应关系，进一步为：在不同的屏幕尺寸数值下以长度为1024像素的分辨率值为基准值，划定所述页面中所述视频缩略图的基准显示列数，并以该基准显示列数为定值获取不同分辨率值下所述视频缩略图的尺寸比例，建立所述视频缩略图的该基准显示列数与所述栅格横向方向总像素值的对应关系。优选地，其中，所述调整单元，进一步用于：读取所述栅格横向方向的总像素值，保持所述视频缩略图的基准显示列数不变，获取该总像素值下所述视频缩略图的横向长度像素尺寸，并根据所述视频缩略图固定的长宽像素比例，调整所述视频缩略图的尺寸，以及根据所述视频分类标签与所述视频缩略图的尺寸对应关系，调整所述视频分类标签的像素尺寸尺寸。优选地，其中，调整后的所述视频分类标签和视频缩略图的实际尺寸大于调整前的所述视频分类标签和视频缩略图的实际尺寸。优选地，其中，所述布局单元，进一步用于：在所述栅格上将调整后的所述视频分类标签置于最左侧，将对应该视频标签的调整后的所述视频缩略图按照从左至右的方式依次横向排列于所述视频标签右侧，构成多个横向平行设置的火车流形式的视频分类行进行显示。与现有技术相比，本申请所述的一种自适应调整的界面流式布局显示的方法和系统，达到了如下效果：1）本申请通过根据在页面显示前所检测到的屏幕的分辨率，将在页面中预置的单元格构成符合当前分辨率的不同尺寸的视频分类标签及视频缩略图，并进行火车流式的排列显示，即使在分辨率发生变化时，构成的视频分类标签及视频缩略图也可以根据变化后的分辨率进行尺寸大小的调整，当用户浏览观看时，视频分类标签及视频缩略图不会因为分辨率的增加导致尺寸大小的缩减，有效解决了页面中视频缩略的布局散乱且视频缩略图尺寸在较高分辨率下产生缩减的问题。2）本申请中的单元格的宽度像素值可以增强页面的显示效果，由该单元格构成的栅格上可以良好的划分成不同的显示区域，在栅格上设置的显示内容（包括：视频分类标签及视频缩略图）的尺寸大小可以达到最佳的浏览舒适度。3）本申请所显示的内容（包括：视频分类标签及视频缩略图）按照不同类型横向排列，增加了显示内容的归属性，也增强用户的浏览体验。当然，实施本申请的任一产品必不一定需要同时达到以上所述的所有技术效果。附图说明此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：图1是本申请实施例一所述的自适应调整的界面流式布局显示的方法的流程框图。图2是本申请实施例二所述的自适应调整的界面流式布局显示的方法的流程框图。图3是本申请实施例一、二中单元格及其构成的栅格的示意图。图4至7是本申请实施例三中所述的自适应调整的界面流式布局显示的方法中视频缩略图和视频本文档来自技高网...

【技术保护点】
一种自适应调整的界面流式布局显示的方法，其特征在于，包括：检测运行该浏览器的终端系统的分辨率值； 根据所述分辨率值，将在所述页面中预先设定像素值的单元格构建成竖向排列且布满所述页面的栅格；读取所述栅格横向方向的总像素值，并结合预置的视频缩略图的基准显示列数与所述栅格横向方向总像素值的对应关系，调整所述视频缩略图和视频分类标签的尺寸；在所述栅格上将调整后的所述视频分类标签和视频缩略图以横向排列方式构成多个横向平行设置的视频分类行进行显示。

【技术特征摘要】
1.一种自适应调整的界面流式布局显示的方法，其特征在于，包括：检测运行浏览器的终端系统的分辨率值；根据所述分辨率值，将在页面中预先设定像素值的单元格构建成竖向排列且布满所述页面的栅格，当屏幕分辨率值出现大幅增加时，栅格单元均相应的增加；读取所述栅格横向方向的总像素值，并在不同的屏幕尺寸数值下以长度为1024像素的分辨率值为基准值，划定所述页面中视频缩略图的基准显示列数，并以该基准显示列数为定值获取不同分辨率值下所述视频缩略图的尺寸比例，建立所述视频缩略图的该基准显示列数与所述栅格横向方向总像素值的对应关系，根据所述对应关系调整所述视频缩略图和视频分类标签的尺寸；在所述栅格上将调整后的所述视频分类标签和视频缩略图以横向排列方式构成多个横向平行设置的视频分类行进行显示；进一步为：在所述栅格上将调整后的所述视频分类标签置于最左侧，将对应该视频标签的调整后的所述视频缩略图按照从左至右的方式依次横向排列于所述视频标签右侧，构成多个横向平行设置的火车流形式的视频分类行进行显示。2.如权利要求1所述的自适应调整的界面流式布局显示的方法，其特征在于，读取所述栅格横向方向的总像素值，并在不同的屏幕尺寸数值下以长度为1024像素的分辨率值为基准值，划定所述页面中所述视频缩略图的基准显示列数，并以该基准显示列数为定值获取不同分辨率值下所述视频缩略图的尺寸比例，建立所述视频缩略图的该基准显示列数与所述栅格横向方向总像素值的对应关系，根据所述对应关系调整所述视频缩略图和视频分类标签的尺寸，进一步为：读取所述栅格横向方向的总像素值，保持所述视频缩略图的基准显示列数不变，获取该总像素值下所述视频缩略图的横向长度像素尺寸，并根据所述视频缩略图固定的长宽像素比例，调整所述视频缩略图的尺寸，以及根据所述视频分类标签与所述视频缩略图的尺寸对应关系，调整所述视频分类标签的尺寸。3.如权利要求2中所述的自适应调整的界面流式布局显示的方法，其特征在于，调整后的所...

【专利技术属性】
技术研发人员：甘露，华文伟，张奥博，李外，晏芳，姚键，潘柏宇，卢述奇，
申请(专利权)人：合一网络技术北京有限公司，
类型：发明
国别省市：北京;11