附加可变div大小

时间:2015-04-30 13:53:05

标签: javascript jquery html css

假设我有这个理论问题,我需要在容器中附加几个不同的可变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,该怎么办?在这种情况下,仍然可以使用包装或砌筑吗?

2 个答案:

答案 0 :(得分:0)

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

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

答案 1 :(得分:0)

如果布局是动态的,您可以使用packerymasonry来设置间隙很小的项目。

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

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