CN110858241B - 基于浏览器的自适应排版方法、装置和存储介质 - Google Patents

Abstract

本发明涉及一种基于浏览器的自适应排版方法、装置和存储介质，属于互联网技术领域。所述方法包括以下步骤：监听用户对浏览器内对象的移动操作；根据被移动对象的面积和移动的目标位置，自适应调整被移动对象的形状；所述装置，包括处理器和存储器，存储器上存储有计算机程序，该计算机程序被处理器执行时，实现上述基于浏览器的自适应排版方法；所述介质，其上存储有计算机程序，该计算机程序被处理器执行时，实现上述基于浏览器的自适应排版方法。与现有技术相比，本发明具有自适应能力强、操作简便性高以及展示效果好等优点。

Description

基于浏览器的自适应排版方法、装置和存储介质

技术领域

本发明涉及互联网技术领域，特别涉及移动端应用领域，具体是指一种基于浏览器的自适应排版方法、装置和存储介质。

背景技术

随着互联网技术的飞速发展，在网页内对发布内容进行展示已经成为一种非常普遍的展示方式。通过浏览器的展示页面，人们可以根据需要将发布的内容以模块化的方式，通过较为美观的排版方式展示出来。

然而用户在浏览器内浏览对应内容时，往往只能按照网页发布时既定的排版进行浏览。这样往往会导致用户需要浏览许多不感兴趣的内容，而且容易漏掉真正对自身有意义的信息。这样既会降低用户的浏览效率，降低浏览体验，同时也不便于发布方推送合适的信息。

目前存在的一种自适应排版方法，可以通过监听用户对内容模块的拖拽情况，从而方便用户将感兴趣的信息拖拽到空白且较为醒目的区域，从而提高浏览效率和浏览体验。但是这种方法往往受制于原始排版中各内容模块的形状和大小，在用户拖拽的模块大小大于空白处的面积，或是空白处已有内容模块的情况下，用户无法成功完成拖拽行为，从而导致自适应排版的失败。

发明内容

本发明的目的是针对上述问题提供一种基于浏览器的自适应排版方法、装置和存储介质。

本发明的目的可以通过以下技术方案来实现：

一种基于浏览器的自适应排版方法，所述的方法包括以下步骤：

(1)监听用户对浏览器内对象的移动操作；

(2)根据被移动对象的面积和移动的目标位置，自适应调整被移动对象的形状。

优选地，所述步骤(2)具体包括以下步骤：

(21)读取被移动对象的目标位置；

(22)判断目标位置处是否存在原始对象，若是则进入步骤(23)，若否则直接将被移动对象移动到目标位置处；

(23)根据被移动对象的面积，自适应调整被移动对象的形状，确保被移动对象和原始对象不发生重合。

优选地，所述步骤(23)具体包括以下步骤：

(231)判断被移动对象与原始对象的重叠区域是否超过阈值，若是则返回移动失败，若否则进入步骤(232)；

(232)根据目标位置处除去原始对象后留白的面积，调用匹配的对象形状模板，并将被移动对象的内容填充至对象形状模板中，实现被移动对象的形状的调整。

优选地，所述匹配的对象形状模板分别与被移动对象的面积和留白的面积相适应。

优选地，所述步骤(232)还包括：根据对象形状模板的格式，自适应调整被移动对象的内容的排版。

优选地，所述阈值为被移动对象面积的50％。

优选地，所述方法还包括：在被移动对象的移动失败时，自适应同时调整被移动对象和原始对象的形状，确保被移动对象和原始对象不发生重合。

优选地，所述方法还包括：在被移动对象的目标位置超出浏览器的显示范围时，停止显示被移动对象。

一种基于浏览器的自适应排版装置，包括处理器和存储器，所述的存储器上存储有计算机程序，该计算机程序被所述处理器执行时，实现上述中任一项所述基于浏览器的自适应排版方法。

一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时，实现上述中任一项所述基于浏览器的自适应排版方法。

与现有技术相比，本发明具有以下有益效果：

(1)本发明提出的方法，在移动对象时，根据被移动对象的面积和目标位置处的情况，自适应调整被移动对象的形状，从而解决了现有技术中，在被移动对象目标位置处已存在占用该区域的对象的情况下，无法完成排版调整的情况，增加了排版的自适应程度，提高了展示效果，也提高了用户的浏览体验。

(2)在调整被移动对象的形状之前，首先需要判断被移动对象与目标位置处原有对象的重叠部分面积是否超过阈值，若是的话则说明此时即使调整了目标对象的形状，也很难保证目标对象和原始对象不发生重合，因此此时会返回移动失败，这样的操作可以增加自适应排版的调整效率，避免自适应排版无法顺利进行。

(3)在调整被移动对象的形状时，通过调用较为匹配的模板来实现形状的调整，这样的调整方式一方面具有效率高且易于实现的优点，另一方面也便于统一管理，同时模板也可以根据多次调整的情况进行相应的更新，具有较强的适应性。

(4)在调整被移动对象的形状时，同时也根据更改后的形状调整被移动对象内容的排版，从而避免由于形状的改变导致展示的内容不美观的情况，进一步提高了展示效果。

(5)在移动失败时，可以进一步同时调整被移动对象和原始对象的形状，来完成自适应排版，提高了排版的灵活性，从而提高了用户的浏览体验。

附图说明

图1为本发明基于浏览器的自适应排版方法的步骤流程图；

图2为实施例中浏览器内原有的排版示意图；

图3为实施例中移动对象过程中浏览器内的排版示意图；

图4为实施例中移动对象完成后浏览器内的排版示意图。

具体实施方式

为了能够更清楚地理解本发明的技术内容，特举以下实施例详细说明。

请参阅图1所示，为本发明基于浏览器的自适应排版方法的步骤流程图。

在一种实施方式中，该基于浏览器的自适应排版方法，包括以下步骤：

(1)监听用户对浏览器内对象的移动操作；

(2)根据被移动对象的面积和移动的目标位置，自适应调整被移动对象的形状。

其中，步骤(2)具体包括以下步骤：

(21)读取被移动对象的目标位置；

(22)判断目标位置处是否存在原始对象，若是则进入步骤(23)，若否则直接将被移动对象移动到目标位置处；

(23)根据被移动对象的面积，自适应调整被移动对象的形状，确保被移动对象和原始对象不发生重合。

在这之中，步骤(23)具体包括以下步骤：

(231)判断被移动对象与原始对象的重叠区域是否超过阈值，这个阈值一般为被移动对象面积的50％，若是则返回移动失败，若否则进入步骤(232)；

(232)根据目标位置处除去原始对象后留白的面积，调用匹配的对象形状模板，并将被移动对象的内容填充至对象形状模板中，实现被移动对象的形状的调整，这里说的匹配的对象形状模板分别与被移动对象的面积和留白的面积相适应；除此之外，步骤(232)还包括：根据对象形状模板的格式，自适应调整被移动对象的内容的排版。

除了上述步骤，上述方法还包括：在被移动对象的移动失败时，自适应同时调整被移动对象和原始对象的形状，确保被移动对象和原始对象不发生重合；以及在被移动对象的目标位置超出浏览器的显示范围时，停止显示被移动对象。

除此之外，本实施例中还提出了一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时，实现上述中任一项基于浏览器的自适应排版方法；以及一种基于浏览器的自适应排版装置，包括处理器和存储器，所示的存储器上存储有计算机程序，该计算机程序被所述处理器执行时，实现上述中任一项基于浏览器的自适应排版方法。

在实际应用中，本发明基于浏览器的自适应排版方法的具体实现方式，通过以下实施例说明。

实施例1

本实施例中，所有的操作都是基于WEB端进行实现的，为了达到用户可以将自己想看的内容模块放置在一个方便查看的位置或隐藏不喜欢的内容的效果，因此主要的思路为：用户通过鼠标拖拽展示内容的模块，实现自定义页面内容布局，移动内容模块过程后每个内容模块重新排列，或者可以关闭不再展示该内容模块。

根据上述思路，本实施例中实现的自适应排版的过程具体如下：如图2所示，为用户进入网站页面中，展示的不同类型的各种内容。从图中可以看出，内容B占据了页面内的大部分展示空间，但是用户想要重点浏览的是内容A，因此此时，用户可以通过拖拽内容B来移动内容B的位置，从而达到突出内容A的目的，过程如图3所示，在拖拽过程中，浏览器首先读取到内容B移动的目标位置，此时可以发现目标位置处存在原始对象内容A和内容C，为了避免内容B与内容A和内容C发生重合，首先判断内容B与二者之间分别重合的面积是否设定的阈值，本实施例中阈值为内容B的原有面积的50％，经判断重合面积并未超过此阈值，因此此时可以自适应调整内容B的形状，此时计算目标位置处排除了内容A和内容C后留白的面积和大致的形状，从模板库中调用与留白面积和形状都较为匹配的形状模板，再将内容B中原因的内容根据形状模板内部的排版格式填充到调用的模板中，就实现了内容B的形状调整，如图4所示，从图4中可以看出，调整后的内容B不与内容A和内容C发生重叠，而且页面按照用户的需求重点显示了内容A的内容，达到了自适应排版的目的。

实施例2

本实施例中自适应排版过程与实施例1的情况和流程基本相同，区别在于，在移动内容B的过程中，发现内容B和内容A与内容C的重叠面积超出了定义的阈值，本实施例中为50％，因此返回移动失败，此时浏览器为了保证移动的顺利进行，将形状调整的对象更改为内容B和内容C同时修改，因此计算目标位置处排除了内容A后剩余的留白的面积和大致的形状，从模板库中调用两个对象形状模板，这两个模板组合后可以较好的匹配留白的面积和形状，在找到了两个模板后，再分别将内容B和内容C的内容根据模板内部的格式填充进去，从而达到自适应排版的目的。除上述区别之外，本实施例的其他过程与实施例1中基本相同。

实施例3

本实施例中自适应排版过程与实施例1的情况和流程基本相同，区别在于，本实施例是基于移动端进行的，因此此时用户不是通过鼠标拖拽对象，而是通过长按选中其中的一个对象后，再进行拖拽来调整位置。除上述区别之外，本实施例的其他过程与实施例1中基本相同。

实施例4

本实施例中自适应排版过程与实施例1的情况和流程基本相同，区别在于，本实施例中内容B移动的目标位置是在浏览器的显示区域之外，此时用户的目的是不显示内容B的内容，因此浏览器直接关闭内容B这一对象不进行展示，达到隐藏用户不喜欢内容的目的。

在此说明书中，本发明已参照其特定的实施例作了描述。但是，很显然仍可以作出各种修改和变换而不背离本发明的精神和范围。因此，说明书和附图应被认为是说明性的而非限制性的。

Claims (9)

1.一种基于浏览器的自适应排版方法，其特征在于，所述的方法包括以下步骤：

（1）监听用户对浏览器内对象的移动操作；

（2）根据被移动对象的面积和移动的目标位置，分别判断该被移动对象与各原始对象的重叠区域是否超过阈值，若否，根据目标位置处除去原始对象后留白的面积，自适应调整被移动对象的形状；若是，根据目标位置处除去被调整形状的原始对象后留白的面积，自适应同时调整被移动对象和原始对象的形状。

2.根据权利要求1所述基于浏览器的自适应排版方法，其特征在于，所述步骤（2）具体包括以下步骤：

（21）读取被移动对象的目标位置；

（22）判断目标位置处是否存在原始对象，若是则进入步骤（23），若否则直接将被移动对象移动到目标位置处；

（23）根据被移动对象的面积，分别判断该被移动对象与各原始对象的重叠区域是否超过阈值，若否，根据目标位置处除去原始对象后留白的面积，自适应调整被移动对象的形状；若是，根据目标位置处除去被调整形状的原始对象后留白的面积，自适应同时调整被移动对象和原始对象的形状；确保被移动对象和原始对象不发生重合。

3.根据权利要求2所述基于浏览器的自适应排版方法，其特征在于，所述步骤（23）具体包括以下步骤：

（231）分别判断被移动对象与各原始对象的重叠区域是否超过阈值，若是则进入步骤（233），若否则进入步骤（232）；

（233）增加原始对象作为变更形状调整的对象，根据目标位置处除去被调整形状的原始对象后留白的面积，对被移动对象以及所述被调整形状的原始对象分别调用匹配的对象形状模板，并将被移动对象的内容填充至所述对象形状模板中，实现所述被移动对象及被调整形状的原始对象的形状调整；

（232）根据目标位置处除去原始对象后留白的面积，调用匹配的对象形状模板，并将被移动对象的内容填充至对象形状模板中，实现被移动对象的形状的调整。

4.根据权利要求3所述基于浏览器的自适应排版方法，其特征在于，所述匹配的对象形状模板分别与被移动对象的面积和留白的面积相适应。

5.根据权利要求3所述基于浏览器的自适应排版方法，其特征在于，所述步骤（232）还包括：根据对象形状模板的格式，自适应调整被移动对象的内容的排版。

6.根据权利要求3所述基于浏览器的自适应排版方法，其特征在于，所述阈值为被移动对象面积的50%。

7.根据权利要求1所述基于浏览器的自适应排版方法，其特征在于，所述方法还包括：在被移动对象的目标位置超出浏览器的显示范围时，停止显示被移动对象。

8.一种基于浏览器的自适应排版装置，包括处理器和存储器，所述的存储器上存储有计算机程序，其特征在于，该计算机程序被所述处理器执行时，实现权利要求1至7中任一项所述方法。

9.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该计算机程序被处理器执行时，实现权利要求1至7中任一项所述基于浏览器的自适应排版方法。

Images