javascript - 如何将一个巨大的div拆分成多个div？

Question

我有一项任务，但我不确定如何最好地完成它。所以我想要一些意见或建议:)

好的，这就是我需要做的。

我有一个内容被发送到打印品的页面(它包含图像，以及 divs、p、span、h1、h2、h3、hr、a 等标签中的文本)。假设它大约有 1500 像素高。

我有一个 300 x 500 像素的容器 div。

我需要获取包含所有内容的页面，并将这些内容拆分到 div 中。

所以:

_______________
|              |
|              |
|              |
|   Content    |
|              |
|              |
|              |
|______________|

进入:

_______________
|   Part 1     |
|______________|
|   Part 2     |
|______________|
|   Part 3     |
|______________|
|   Part 4     |
|______________|

但我的问题是如何在页面上获取一个包含多个元素的巨大对象并遍历它并确定这个 div 应该被切成两半并放在第 1 部分和第 2 部分中，因为它不适合第 1 部分的剩余空间？我如何确定剩余的和不剩余的？

我的想法是将 body 标签的全部内容读入一个变量，循环遍历每个元素并将其添加到另一个有剩余空间的变量中，我可以根据 DOM 元素的高度和宽度来确定。但我不确定这是否是最好的主意。

Answer 1

如果使用蛮力类型的方法不是不可能的，那么使用类似下面的方法应该可行:

• 将所有内容放入 div 1
• 开始将 div 1 中的内容放入 div 2 中，直到 div 1 的大小正确
• 对 div 2 重复此过程

另一种方法是遍历 div 中的每个节点，对总高度求和，直到超过限制。此时，退后一步，开始将内容移动到下一个 div，重复该过程。

如果您的页面在单个文本节点中包含大量文本，那么它可能有点棘手。您很可能需要实现某种系统来拆分文本节点，以便能够计算各个文本 block 的高度并能够在 div 之间拆分它们。