首先简单说明一下这里指的魔方是什么。见下图：

通过选择几格自定义生成对应的一整块，然后在这一块中加入需要的内容。大概就是这样一种功能。相对而言，生成的布局采用表格布局是比较合理的一种做法，这样可以通过合并单元格的方式将几个格子生成一整块容器。如果采用了绝对定位的布局方式，后期再重新编辑的时候会出现很麻烦的情况。比如当删除了某一整行的内容之后，下面的容器并不会因为删除的这一行而自动向上填补空位。这里就对这一问题的解决思路做一个总结说明，并不对魔方具体功能实现做讲解（后面逻辑理清了时间充足的前提下会考虑重写一个表格布局的魔方，然后贴出方法，暂时没空）。

首先是理清楚存在的具体问题有哪些，然后一步步解决。这里大概列出我的思路下需要解决的几个问题：

• 1.需要知道对应的哪几行内容为空了；

• 2.剩余其他几行的内容需要向上减小多少top值来填补空位；

• 3.整个魔方的容器高度需要减少多少；

大体上是这三个问题，里面或许还涉及了一些小问题，比如只有当一整行都不存在内容的情况下，下方的内容才需要向上填补，向上填补的高度有可能存在不一样的情况如何判断等等。下面是解决的思路总结。

首先对魔方容器中的每一块元素添加class标记它所占的行号。比如某一元素所在位置是第一行就加上row-1的class，如果占多行就加上多个class，占一二两行的就是:class="row-1 row-2"。之后便是设法找出缺失的行数有几个分别是哪几行。比如这样：

var arr = new Array();
for(var n=1;n<5;n++){
    if($(".cube-box").find(".row-"+n).length == 0) {
        arr.push(n);
    };
};

假设我们找出了缺失的行数并把它们存入了一个数组arr。arr.length便是一共空出了几行，arr数组的每一个值便是具体空出的行号。那么魔方的容器高度需要减少的值便是arr.length的值乘以每一个的高度，或者对于这种4*4的魔方就是arr.length乘以整体高度的25%。

下面需要解决的问题就是每一块内容需要向上减小多少的top值。如果第一行空出，便是二、三、四行各向上减少25%的高度。如果第一行和第三行空出，那么第二行向上25%，第四行实际上是向上50%。如果每一种情况写一个判断那也太坑了。这里的解决思路是：循环arr数组中的每一个值，然后在循环中再遍历存在的每一个元素，如果该元素所在“起点行”（也就是class中标记的第一个值小的行号）的行号大于当前循环的arr数组中的这个值，那么就向上减少25%的top值。示例代码如下：

var _row,_top;
for(var x in arr) {
    $(".cube-box .cube").each(function(){
        _row = $(this).prop("class").substring(4,5);
        _top = parseInt($(this).css("top"));
        if(_row > arr[x]) {
            $(this).css("top",_top-h+"px"); //h为每一行的固定高度
        };
    });
};

思路大致就是这样了。或许这不是最好的方法，摆出来仅供参考。如果有错或更好的方法欢迎提出。