用于在页面上拟合div的算法

Question

我试图编写一个引擎，它将采用11个具有变化高度的部分，并尝试将它们包装成pdf（高度：1500像素/页）。

条件是所有底层div都不能跨越两个不同的页面，即div可以驻留在第1页中，如果它不适合则转到第2页。不重叠。

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

引擎应该根据它们的高度对基础部分进行重新排序，并建议将pdf中的哪个页面组合包含多少部分和哪些部分。

以下是一个说明情况的例子：

例如：

  

Big 2 DIV，身高= 1500px

还有一些部分：

  

section1身高：600px

     

section2 height：1000px

     

section3身高：700px

     

section4 height：500px

     

section5身高：500px

     

section6身高：500px

所以在第一个大div中，三个组合可以进入它，剩下最小的空白区域。 section1 & section3或section1 & section4或section4 & section5 & section6。

那么现在使用jquery或javascript完成这项操作的完美逻辑是什么，或者是他们的任何插件，如isotope或masonry

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

感谢。

Answer 1

您需要依赖CSS顶部和底部属性。这是一个工作小提琴的起点：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;
}