一种智能分栏方法及系统与流程

1.本发明涉及分栏领域，特别是一种智能分栏方法及系统。


背景技术：

2.网页分栏是指将网页的宽度等分成n份。css3支持了此特性，它使用属性columns用来设置元素的列宽和列数。多栏布局可以控制页面内容的排版方式，可以将文本内容设计成像报纸一样的多列布局。
3.使用css3的columns进行分栏时，会有如下问题。
4.打印网页时，最后一页的显示会出现左边一半内容，右边一半内容的情况，不符合“先左再右”的人类视角。
5.使用css3的columns进行分栏后，打印网页时，无法完美的进行智能分栏，不能充分利用纸张空间。
6.css3的columns是在css3标准引入的，一些较老的浏览器或第三方工具无法使用它；无法与css3支持不够的第三方工具(例如wkhtmltopdf)进行结合。


技术实现要素：

7.本发明的目的在于克服现有技术的不足，提供一种智能分栏方法及系统，实现了不基于css3 columns的分栏，实现人类视角下的分栏；同时最大幅度的利用纸张空间；可与不支持css3的第三方工具进行结合使用。
8.本发明的目的是通过以下技术方案来实现的：
9.一种智能分栏方法，包括以下步骤：
10.s1：将所有待分栏的内容装入原始div中，所述原始div的宽度为栏宽度，所述原始div的高度不限；
11.s2：依次从原始div中取出原始dom节点并将原始dom节点逐个放入一个或多个高度为栏高度的分栏子div中的一个，如果当前的分栏子div不足以容纳原始dom节点，则对原始dom节点按高度进行切割并分配到分栏子div。
12.进一步，所述步骤s2中依次从原始div中取出原始dom节点后进行以下子步骤；
13.s201：判断当前的分栏子div是否已满，如果当前的分栏子div已满，则顺延下一分栏子div；
14.s202：判断当前的分栏子div是否能容纳原始dom节点；
15.s203：如果当前的分栏子div能容纳原始dom节点，则将原始dom节点放入当前的分栏子div；如果当前的分栏子div不能容纳原始dom节点，则按高度自原始dom节点切割出当前的分栏子div正好容纳的dom切割节点，将dom切割节点放入当前的分栏子div并顺延下一分栏子div，对切割后的原始dom节点继续执行步骤s201-s203的操作。
16.进一步，所述步骤s203中对原始dom节点进行切割时，dom切割节点的高度＝当前的分栏子div剩余的高度。
17.进一步，所述步骤s203中对原始dom节点进行切割时以原始dom节点的子dom节点为单位进行切割。
18.进一步，所述步骤s203中对原始dom节点进行切割的操作包括以下子步骤：
19.(1)创建前页div与后页div；
20.(2)将原始dom节点放入前页div；
21.(3)自前页div中的dom节点的最末尾依次将所述子dom节点移动到后页div中，直至当前的分栏子div正好容纳前页div中的dom节点；前页div中的dom节点即为dom切割节点，后页div中的dom节点即为切割后的原始dom节点。
22.进一步，所述步骤s203中以原始dom节点的所述子dom节点为单位进行切割时出现临界子dom节点时，对临界子dom节点进行切割；
23.所述临界子dom节点在当前的分栏子div中无法容纳但临界子dom节点不放入当前的分栏子div时当前的分栏子div有空间剩余。
24.进一步，所述临界子dom节点为文字，则对临界子dom节点的切割采用二分切割。
25.进一步，所述分栏子div的创建方式包括新建与再建。
26.一种智能分栏系统，用于实现上述一种智能分栏方法，包括数据接收接口、数据处理中心以及数据输出接口，所述数据接收接口接收所有待分栏的内容，所述数据处理中心对所有待分栏的内容进行处理得到分栏子div的信息，所述数据输出接口输出分栏子div的信息。
27.本发明的有益效果是：
28.通过基于html dom结构动态调整，实现了不基于css3 columns的分栏，实现对最后一页在“先左再右”的人类视角下的分栏；同时最大幅度的利用纸张空间，节省资源，避免浪费；可与不支持css3的第三方工具进行结合使用。
附图说明
29.图1为使用css3 columns分栏打印的最后一页的效果图；
30.图2为从左到右排列的“先左再右”的人类视角下的分栏效果图；
31.图3为使用css3 columns分栏可能出现的空间浪费效果图；
32.图4为本发明分栏完成后的示例图；
33.图5为本发明的总流程图。
具体实施方式
34.以下通过特定的具体实例说明本发明的实施方式，本领域技术人员可由本说明书所揭露的内容轻易地了解本发明的其他优点与功效。本发明还可以通过另外不同的具体实施方式加以实施或应用，本说明书中的各项细节也可以基于不同观点与应用，在没有背离本发明的精神下进行各种修饰或改变。需说明的是，在不冲突的情况下，以下实施例及实施例中的特征可以相互组合。
35.需要说明的是，以下实施例中所提供的图示仅以示意方式说明本发明的基本构想，遂图式中仅显示与本发明中有关的组件而非按照实际实施时的组件数目、形状及尺寸绘制，其实际实施时各组件的型态、数量及比例可为一种随意的改变，且其组件布局型态也
可能更为复杂。
36.实施例一：
37.如图1至图5所示，一种智能分栏方法，包括以下步骤：
38.s1：将所有待分栏的内容装入原始div中，所述原始div的宽度为栏宽度，所述原始div的高度不限；
39.所有待分栏的内容位于html dom节点中。
40.栏宽度为分栏得到的栏的宽度。栏宽度可为页宽度的1/n，n为分栏数目，分栏数目可通过输入设置，栏宽度也可根据分栏数目结合栏与栏之间的间距确定。
41.如果n等于2，则是将所有待分栏的内容装在一个宽度为半页款的原始div(即org_div)中。
42.org_div仅为分栏过程的中间容器，先把所有内容装进去，再一个一个的取出来。
43.s2：依次从原始div中取出原始dom节点并将原始dom节点逐个放入一个或多个高度为栏高度的分栏子div中的一个，如果当前的分栏子div不足以容纳原始dom节点，则对原始dom节点按高度进行切割并分配到分栏子div；
44.一个分栏子div即对应于页面的一栏，其中栏高度可为页高度，也可为页面的内容高度。此处的分栏子div即为最终输出，每n个分栏子div设于一个页面。
45.多个分栏子div中，每n个分栏子div属于一个页div。页div对应于一个页面。一个页div下的n个分栏子div的布局可使用绝对定位布局。
46.分栏子div按从左到右顺序排列。
47.所述分栏子div的创建方式包括新建与再建。
48.新建时，可系统设置，也可用户设定。
49.所述分栏子div不足，则创建新的分栏子div。
50.具体地，若最后一个分栏子div也放不下了，就创建新的页div(其中包含n个分栏子div)，直到org_div中的子节点被全部取出。
51.原始dom节点为即步骤s1中装入原始div中的原html dom节点。
52.将原始dom节点放入分栏子div中。按从左至右的顺序，若第一个分栏子div放不下了，就放入第二个分栏子div；若第二个分栏子div放不下了，就放第三个分栏子div，依次类推。若最后一个分栏子div也放不下了，则再次新建多个高度为栏高度的分栏子div，直到org_div中的原始dom节点被全部取出。
53.所述步骤s2中依次从原始div中取出原始dom节点后进行以下子步骤；
54.s201：判断当前的分栏子div是否已满，如果当前的分栏子div已满，则顺延下一分栏子div；
55.s202：判断当前的分栏子div是否能容纳原始dom节点；
56.s203：如果当前的分栏子div能容纳原始dom节点，则将原始dom节点放入当前的分栏子div；如果当前的分栏子div不能容纳原始dom节点，则按高度自原始dom节点切割出当前的分栏子div正好容纳的dom切割节点，将dom切割节点放入当前的分栏子div并顺延下一分栏子div，对切割后的原始dom节点继续执行步骤s201-s203的操作。
57.所述步骤s203中对原始dom节点进行切割时，dom切割节点的高度＝当前的分栏子div剩余的高度。
58.举例说明，如果原始dom节点的高度为90，而当前的分栏子div剩余的高度仅为60，则要对原始dom节点进行切割，切割得到的第二dom节点的高度为60，当前的分栏子div正好能够容纳，第一dom节点的高度为30。
59.所述步骤s203中对原始dom节点进行切割时以原始dom节点的子dom节点为单位进行切割。
60.所述步骤s203中对原始dom节点进行切割的操作包括以下子步骤：
61.(1)创建前页div与后页div；
62.(2)将原始dom节点放入前页div；
63.(3)自前页div中的dom节点的最末尾依次将所述子dom节点移动到后页div中，直至当前的分栏子div正好容纳前页div中的dom节点；前页div中的dom节点即为dom切割节点，后页div中的dom节点即为切割后的原始dom节点。
64.所述步骤s203中以原始dom节点的所述子dom节点为单位进行切割时出现临界子dom节点时，对临界子dom节点进行切割；
65.所述临界子dom节点在当前的分栏子div中无法容纳但临界子dom节点不放入当前的分栏子div时当前的分栏子div有空间剩余。
66.也就是说，如果临界子dom节点本身的高度无法完美切割，则对临界子dom节点进行切割。
67.具体的，临界子dom节点是指移动到某子dom节点时，这个子dom节点如果放入步骤(1)创建的后页div，则dom切割节点在当前的分栏子div内的高度能满足，但是还剩一些空间，如果不放入，高度就不满足(会超出当前的分栏子div的高度)。
68.所述临界子dom节点为文字，则对临界子dom节点的切割采用二分切割。
69.如果临界子dom节点本身是文本，没有子dom节点，则进行二分切割，直到满足条件为止。二分切割是指先切文本的一半(按文本长度)，看看高度是否满足，若不满足，再切一半的一半，直到高度满足为止。
70.对临界子dom节点的切割是一个递归过程，如果不满足条件，会对孙子dom节点再进行切割，直到满足条件为止。
71.将所有org_div中的内容完全装入到新创建的分栏子div中后，删除org_div节点。
72.一种智能分栏系统，用于实现上述一种智能分栏方法，包括数据接收接口、数据处理中心以及数据输出接口，所述数据接收接口接收所有待分栏的内容，所述数据处理中心对所有待分栏的内容进行处理得到分栏子div的信息，所述数据输出接口输出分栏子div的信息。
73.无需css3支持。在分栏过程中进行dom节点宽高、位置计算，用类似搭积木的方式，将需要分栏的内容(dom节点)依次放于事先创建好的分栏子div中。
74.通过基于html dom结构动态调整，实现了不基于css3 columns的分栏，实现对最后一页在“先左再右”的人类视角下的分栏；同时最大幅度的利用纸张空间，节省资源，避免浪费；可与不支持css3的第三方工具进行结合使用。
75.以上所述实施例仅表达了本发明的具体实施方式，其描述较为具体和详细，但并不能因此而理解为对本发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变形和改进，这些都属于本发明的保
护范围。

技术特征：
1.一种智能分栏方法，其特征在于：包括以下步骤：s1：将所有待分栏的内容装入原始div中，所述原始div的宽度为栏宽度，所述原始div的高度不限；s2：依次从原始div中取出原始dom节点并将原始dom节点逐个放入一个或多个高度为栏高度的分栏子div中的一个，如果当前的分栏子div不足以容纳原始dom节点，则对原始dom节点按高度进行切割并分配到分栏子div。2.根据权利要求1所述的一种智能分栏方法，其特征在于：所述步骤s2中依次从原始div中取出原始dom节点后进行以下子步骤；s201：判断当前的分栏子div是否已满，如果当前的分栏子div已满，则顺延下一分栏子div；s202：判断当前的分栏子div是否能容纳原始dom节点；s203：如果当前的分栏子div能容纳原始dom节点，则将原始dom节点放入当前的分栏子div；如果当前的分栏子div不能容纳原始dom节点，则按高度自原始dom节点切割出当前的分栏子div正好容纳的dom切割节点，将dom切割节点放入当前的分栏子div并顺延下一分栏子div，对切割后的原始dom节点继续执行步骤s201-s203的操作。3.根据权利要求2所述的一种智能分栏方法，其特征在于：所述步骤s203中对原始dom节点进行切割时，dom切割节点的高度＝当前的分栏子div剩余的高度。4.根据权利要求2所述的一种智能分栏方法，其特征在于：所述步骤s203中对原始dom节点进行切割时以原始dom节点的子dom节点为单位进行切割。5.根据权利要求4所述的一种智能分栏方法，其特征在于：所述步骤s203中对原始dom节点进行切割的操作包括以下子步骤：(1)创建前页div与后页div；(2)将原始dom节点放入前页div；(3)自前页div中的dom节点的最末尾依次将所述子dom节点移动到后页div中，直至当前的分栏子div正好容纳前页div中的dom节点；前页div中的dom节点即为dom切割节点，后页div中的dom节点即为切割后的原始dom节点。6.根据权利要求4所述的一种智能分栏方法，其特征在于：所述步骤s203中以原始dom节点的所述子dom节点为单位进行切割时出现临界子dom节点时，对临界子dom节点进行切割；所述临界子dom节点在当前的分栏子div中无法容纳但临界子dom节点不放入当前的分栏子div时当前的分栏子div有空间剩余。7.根据权利要求6所述的一种智能分栏方法，其特征在于：所述临界子dom节点为文字，则对临界子dom节点的切割采用二分切割。8.根据权利要求1所述的一种智能分栏方法，其特征在于：所述分栏子div的创建方式包括新建与再建。9.一种智能分栏系统，用于实现权利要求1-8中任一权利要求所述的一种智能分栏方法，其特征在于：
包括数据接收接口、数据处理中心以及数据输出接口，所述数据接收接口接收所有待分栏的内容，所述数据处理中心对所有待分栏的内容进行处理得到分栏子div的信息，所述数据输出接口输出分栏子div的信息。

技术总结
本发明涉及一种智能分栏方法，包括以下步骤：S1：将所有待分栏的内容装入原始DIV中，所述原始DIV的宽度为栏宽度，所述原始DIV的高度不限；S2：依次从原始DIV中取出原始DOM节点并将原始DOM节点逐个放入一个或多个高度为栏高度的分栏子DIV中的一个，如果当前的分栏子DIV不足以容纳原始DOM节点，则对原始DOM节点按高度进行切割并分配到分栏子DIV。一种智能分栏系统，用于实现上述一种智能分栏方法，包括数据接收接口、数据处理中心以及数据输出接口。通过基于HTML DOM结构动态调整，实现了不基于CSS3Columns的分栏，实现对最后一页在“先左再右”的人类视角下的分栏；同时最大幅度的利用纸张空间，节省资源，避免浪费；可与不支持CSS3的第三方工具进行结合使用。的第三方工具进行结合使用。的第三方工具进行结合使用。


技术研发人员：易洪宇 李黎明 唐晋义
受保护的技术使用者：四川生学教育科技有限公司
技术研发日：2023.03.16
技术公布日：2023/7/19