一种前端实现自适应宫格的交互方法及装置制造方法及图纸

本发明专利技术涉及互联网领域，尤其是涉及一种前端实现自适应宫格的交互方法及装置。包括：步骤1，客户端通过后台服务器调取原始网站内容在客户端浏览器上呈现时，后台服务器实时监测客户端浏览器的分辨率数据；步骤2，当原始网站存在图片宫格、或新闻宫格、或视频宫格时，后台服务器实时匹配客户端浏览器分辨率与原始网站分辨率数据，当客户端浏览器分辨率大于或小于原始网站分辨率时，自动对原始网站中的宫格放大或缩小后显示在客户端浏览器上。因此，本发明专利技术具有如下优点：兼容了网站范围内的自动缩放和阈值下的差异化展示。优化并了在前端宫格布局中的兼容性问题，同时保证了交互的稳定性和可靠性。

【技术实现步骤摘要】

本专利技术涉及互联网领域，尤其是涉及一种前端实现自适应宫格的交互方法及装置。
技术介绍
在网站中会有很多需要通过宫格展示的信息，如：图片宫格、新闻宫格、视频宫格等等。这样做的好处是让用户一次性看到或操作到更多，并且提升功能或者内容的曝光率。网站的内容需要在不同分辨率下的浏览器进行展示，有一些网站对于宫格展示没有做自适应处理，导致难看的滚动条或者直接溢出隐藏等问题，有一些网站对于宫格的自适应简单粗暴，直接放大或缩小影响了用户的操作。
技术实现思路
本专利技术主要是解决现有技术所存在的技术问题；提供了一种兼容了网站范围内的自动缩放和阈值下的差异化展示。优化并了在前端宫格布局中的兼容性问题，同时保证了交互的稳定性和可靠性的一种前端实现自适应宫格的交互方法及装置。本专利技术的上述技术问题主要是通过下述技术方案得以解决的：一种前端实现自适应宫格的交互方法，其特征在于，包括：步骤1，在客户端通过后台服务器调取的原始网站内容在客户端浏览器上呈现后，后台服务器实时监测客户端浏览器的分辨率数据；；步骤2，当原始网站存在图片宫格、或新闻宫格、或视频宫格后，后台服务器实时匹配客户端浏览器分辨率与原始网站分辨率数据，当客户端浏览器分辨率大于或小于原始网站分辨率时，自动对原始网站中的宫格放大或缩小后显示在客户端浏览器上。优选地，所述步骤2中，自动对原始网站中的宫格放大或缩小包括，定义基础分辨率为M*N，然后定义参数：基础分辨率的宽为ScreenBaseWidth；基础分辨率的高为ScreenBaseHeight；基础宫格的宽为GridBaseWidth；基础宫格的高为GridBaseHeight；当前分辨率的宽为ScreenCurWidth；当前分辨率的高为ScreenCurHeight；则，单个宫格需要放大或缩小的数据基于以下公式：变换后宫格宽为：GridBaseWidth * ScreenCurWidth / ScreenBaseWidth； 式一变换后宫格高为：GridBaseHeight * ScreenCurHeight / ScreenBaseHeight； 式二所述基础宫格为后台服务器原始网站中宫格的原始高、宽数据。优选地，所述步骤2中，当客户端浏览器分辨率大于基础分辨率时，宫格在客户端浏览器显示时维持基础宫格的宽高。优选地，所述步骤2中，设定分辨率阈值，当分辨率小于分辨率阈值，进行差异化展示，具体是：当客户端浏览器分辨率小于分辨率阈值时，采用式一和式二变换宫格参数，并在客户端浏览器显示；当客户端浏览器分辨率等于分辨率阈值时，采用式一和式二变换宫格参数，删除不能显示完全的宫格列数或行数后，在客户端浏览器显示；当客户端浏览器分辨率大于分辨率阈值时，采用式一和式二变换宫格参数，维持基础宫格的宽高并在客户端浏览器显示。一种前端实现自适应宫格的交互装置，包括：分辨率数据检测模块：在客户端通过后台服务器调取的原始网站内容在客户端浏览器上呈现后，后台服务器实时监测客户端浏览器的分辨率数据；分辨率实时匹配模块：当原始网站存在图片宫格、或新闻宫格、或视频宫格后，后台服务器实时匹配客户端浏览器分辨率与原始网站分辨率数据，当客户端浏览器分辨率大于或小于原始网站分辨率时，分辨率实时匹配模块自动对原始网站中的宫格放大或缩小后显示在客户端浏览器上。优选地，分辨率实时匹配模块自动对原始网站中的宫格放大或缩小包括，定义基础分辨率为M*N，然后定义参数：基础分辨率的宽为ScreenBaseWidth；基础分辨率的高为ScreenBaseHeight；基础宫格的宽为GridBaseWidth；基础宫格的高为GridBaseHeight；当前分辨率的宽为ScreenCurWidth；当前分辨率的高为ScreenCurHeight；则，单个宫格需要放大或缩小的数据基于以下公式：变换后宫格宽为：GridBaseWidth * ScreenCurWidth / ScreenBaseWidth； 式一变换后宫格高为：GridBaseHeight * ScreenCurHeight / ScreenBaseHeight； 式二所述基础宫格为后台服务器原始网站中宫格的原始高、宽数据。优选地，分辨率实时匹配模块自动放大或缩小时，当客户端浏览器分辨率大于基础分辨率时，宫格在客户端浏览器显示时维持基础宫格的宽高。优选地，通过分辨率实时匹配模块自动放大或缩小设定分辨率阈值，当分辨率小于分辨率阈值，进行差异化展示，具体是：当客户端浏览器分辨率小于分辨率阈值时，采用式一和式二变换宫格参数，并在客户端浏览器显示；当客户端浏览器分辨率等于分辨率阈值时，采用式一和式二变换宫格参数，删除不能显示完全的宫格列数或行数后，在客户端浏览器显示；当客户端浏览器分辨率大于分辨率阈值时，采用式一和式二变换宫格参数，维持基础宫格的宽高并在客户端浏览器显示。因此，本专利技术具有如下优点：兼容了网站范围内的自动缩放和阈值下的差异化展示。优化并了在前端宫格布局中的兼容性问题，同时保证了交互的稳定性和可靠性。附图说明附图1是本专利技术实施例1中当分辨率等于预先设定的阈值时的缩放效果示意图。附图2是本专利技术实施例1中当分辨率小于某一个预先设定的阈值时的缩放效果示意图。附图3是本专利技术的结构框图。具体实施方式下面通过实施例，并结合附图，对本专利技术的技术方案作进一步具体的说明。一种前端实现自适应宫格的交互方法，包括：步骤1，在客户端通过后台服务器调取的原始网站内容在客户端浏览器上呈现后，后台服务器实时监测客户端浏览器的分辨率数据；步骤2，当原始网站存在图片宫格、或新闻宫格、或视频宫格后，后台服务器实时匹配客户端浏览器分辨率与原始网站分辨率数据，当客户端浏览器分辨率大于或小于原始网站分辨率时，自动对原始网站中的宫格放大或缩小后显示在客户端浏览器上。其中，自动对原始网站中的宫格放大或缩小包括，定义基础分辨率为M*N，然后定义参数：基础分辨率的宽为ScreenBaseWidth；基础分辨率的高为ScreenBaseHeight；基础宫格的宽为GridBaseWidth；基础宫格的高为GridBaseHeight；当前分辨率的宽为ScreenCurWidth；当前分辨率的高为ScreenCurHeight；则，单个宫格需要放大或缩小的数据基于以下公式：变换后宫格宽为：GridBaseWidth * ScreenCurWidth / ScreenBaseWidth； 式一变换后宫格高为：GridBaseHeight * ScreenCurHeight / ScreenBaseHeight； 式二所述基础宫格为后台服务器原始网站中宫格的原始高、宽数据。需要注意的是：在分辨率极小或极大的情况下，宫格可能同时极小或极大，这样不仅会导致视觉上错乱，而且会影响功能的正常使用。这时，可以设定分辨率阈值，当分辨率小于分辨率阈值，进行差异化展示，具体是：当客户端浏览器分辨率小于分辨率阈值时，采用式一和式二变换宫格参数，并在客户端浏览器显示；当客户端浏览器分辨率等于分辨率阈值时，采用式一和式二变换宫格参数，删除不能显示完全的宫格列数或行数后，在客户端浏览器显示；当客户端浏览器分辨率大于分辨率阈值时，采用式一本文档来自技高网...

【技术保护点】
一种前端实现自适应宫格的交互方法，其特征在于，包括：步骤1，在客户端通过后台服务器调取的原始网站内容在客户端浏览器上呈现后，后台服务器实时监测客户端浏览器的分辨率数据；步骤2，当原始网站存在图片宫格、或新闻宫格、或视频宫格后，后台服务器实时匹配客户端浏览器分辨率与原始网站分辨率数据，当客户端浏览器分辨率大于或小于原始网站分辨率时，自动对原始网站中的宫格放大或缩小后显示在客户端浏览器上。

【技术特征摘要】
1.一种前端实现自适应宫格的交互方法，其特征在于，包括：步骤1，在客户端通过后台服务器调取的原始网站内容在客户端浏览器上呈现后，后台服务器实时监测客户端浏览器的分辨率数据；步骤2，当原始网站存在图片宫格、或新闻宫格、或视频宫格后，后台服务器实时匹配客户端浏览器分辨率与原始网站分辨率数据，当客户端浏览器分辨率大于或小于原始网站分辨率时，自动对原始网站中的宫格放大或缩小后显示在客户端浏览器上。2.根据权利要求1所述的一种前端实现自适应宫格的交互方法，其特征在于，所述步骤2中，自动对原始网站中的宫格放大或缩小包括，定义基础分辨率为M*N，然后定义参数：基础分辨率的宽为ScreenBaseWidth；基础分辨率的高为ScreenBaseHeight；基础宫格的宽为GridBaseWidth；基础宫格的高为GridBaseHeight；当前分辨率的宽为ScreenCurWidth；当前分辨率的高为ScreenCurHeight；则，单个宫格需要放大或缩小的数据基于以下公式：变换后宫格宽为：GridBaseWidth * ScreenCurWidth / ScreenBaseWidth； 式一变换后宫格高为：GridBaseHeight * ScreenCurHeight / ScreenBaseHeight； 式二所述基础宫格为后台服务器原始网站中宫格的原始高、宽数据。3.根据权利要求2所述的一种前端实现自适应宫格的交互方法，其特征在于，所述步骤2中，当客户端浏览器分辨率大于基础分辨率时，宫格在客户端浏览器显示时维持基础宫格的宽高。4.根据权利要求2所述的一种前端实现自适应宫格的交互方法，其特征在于，所述步骤2中，设定分辨率阈值，当分辨率小于分辨率阈值，进行差异化展示，具体是：当客户端浏览器分辨率小于分辨率阈值时，采用式一和式二变换宫格参数，并在客户端浏览器显示；当客户端浏览器分辨率等于分辨率阈值时，采用式一和式二变换宫格参数，删除不能显示完全的宫格列数或行数后，在客户端浏览器显示；当客户端浏览器分辨率大于分辨率阈值时，采用式一和式二变换宫格参数，维持基础宫格的宽高并在客户端浏览器显示。5.一种前端实现自适应宫格的交互装置，其特征...

【专利技术属性】
技术研发人员：杜伟，
申请(专利权)人：武汉斗鱼网络科技有限公司，
类型：发明
国别省市：湖北;42