附加可变div大小

Question

假设我有这个理论问题，我需要在容器中附加几个不同的可变div大小。

以下是一个例子：

http://i.imgur.com/AmbCYAZ.png

现在让我们说我希望在第47号（在div 33下面）之后直接追加第48号。

像这样http://i.imgur.com/vikKASs.png。

这有可能吗？如果没有，替代品会是什么？

如果有人有兴趣我的意思：

<li class="ui-state-default listitem smallbox">
   <div style="background-color: #D305ED" class="inner">1</div>
</li>

编辑：如果我还想使用JQuery UI库来允许我在屏幕上移动div，该怎么办？在这种情况下，仍然可以使用包装或砌筑吗？

Answer 1

您必须计算渲染时间的定位。

为了更容易，请检查Jquery插件Masonry： http://masonry.desandro.com/

Answer 2

如果布局是动态的，您可以使用packery或masonry来设置间隙很小的项目。

如果是静态布局，您可以通过填充表格并跟踪单元格的col和rolspan来创建效果。前瞻的逻辑是复杂的，因此您可能需要尝试以下两步方法：

由于您的示例似乎只有2个尺寸（单尺寸和双尺寸），您可以创建一个二维数组，并根据尺寸逐步填充带有项目编号的单元格。这是packery以像素为基础的非常粗略的版本。一旦填充了数组，就可以根据数组生成输出（在具有绝对定位的表TRs / TDs或DIV中）。