在页面上适合 div 的算法

Question

我正在尝试编写一个引擎，该引擎将占用 11 个不同高度的部分，并尝试将它们包装在 pdf 中（高度：1500 像素/页）。

条件是任何底层 div 都不能跨越两个不同的页面，即 div 可以位于第 1 页，如果不适合则转到第 2 页。不能重叠。

目标是尽量减少每页末尾的空白空间（如果可能，根本不要）。

引擎应该考虑到它们的高度重新排序底层部分，并建议 pdf 中的哪个页面将包含多少和哪些部分的组合。

这里有一个例子来说明情况：

例如：

Big 2 DIV 和高度 = 1500px 每个

还有一些部分：

section1 高度：600px

section2 高度：1000px

section3 高度：700px

section4 高度：500px

section5 高度：500px

section6 高度：500px

因此，在第一个大 div 中，三个组合可以以最少的空白空间进入它。 section1 & section3 或 section1 & section4 或 section4 & section5 & section6。

那么现在使用 jquery 或 javascript 执行此操作的完美逻辑是什么，或者他们是否有任何可用的插件，例如 isotope 或 masonry

根据我的研究，切割库存算法似乎符合我的要求，请建议您是否有其他方法或一些用于切割库存算法的伪代码。

谢谢。

Answer 1

您需要依赖 CSS 的 top 和 bottom 属性。这是您工作的起点：http://jsfiddle.net/theoutlander/X8JV9/

<div class="container">
    <div class="top color">child1</div>
    <div class="middle color">child2</div>
    <div class="bottom color">child3</div>
</div>

.container {
    height: 1500px;
    width:100px;
    background-color: red;
}

.color {
    background-color: yellow;
    border: 1px solid blue;
}

.top {
    top: 0;
    min-height: 100px;
}

.middle {
    top: 100px;
    height: calc(100% - 200px);
}

.bottom {
    bottom: 0;
    min-height: 100px;
}