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

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

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

• 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为每一行的固定高度
        };
    });
};

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

之前对于HTML5的本地存储功能有所了解，但却没有实际使用过。这次在做博客的过程中有一个小功能使用到了Web Storage技术。便在这里做一个简单的讲解。

首先，Web Storage其实分为 sessionStorage 和 localStorage 两种。它们两者的区别，sessionStorage保存的数据只在构建它们的窗口或标签页内可见，而且当你关闭数据所在的窗口时，嗯它们就挂了。而localStorage命就比较硬，即使你关闭当前窗口甚至浏览器它们也不会消失，并且localStorage里存储的数据可被同源的（包括规则、主机和端口）每个窗口或者标签页共享。当然两者的数据都是存储在浏览器里的，如果你换了个浏览器甚至主机自然就没效了。

既然是HTML5的东西自然还是要先考虑一下它的兼容性的。不过Web Storage的支持情况还是很不错的。就IE而言即使IE8也表示支持Web Storage技术，也就是说，如果你能正常看到这篇文章，那么你所用的浏览器应该都是支持的。不过为了保险起见我们还是应该去检测一下。

//sessionStorage
if(window.sessionStorage) {
    alert("您的浏览器支持sessionStorage！");
} else {
    alert("您的浏览器不支持sessionStorage...");
};

//localStorage
if(window.localStorage) {
    alert("您的浏览器支持localStorage！");
} else {
    alert("您的浏览器不支持localStorage...");
};

我们不妨通过一个简单的实例来讲解Web Storage的用法。在下方的文本框里输入你的昵称，并点击确定提交。看你的昵称是不是也显示在下方了呢？

确定

欢迎光临！

这好像也没什么。那么我们刷新一下页面，或者关闭你当前的浏览器再打开进入这个页面，是不是依旧可以看到你的昵称呢？我们看下代码实现：

function ws(){
    var _btn = document.getElementById("ws_ok"),
        _nick = "";
    if(localStorage.nickname) {
        document.getElementById("welcome").innerHTML = localStorage.nickname;
    };
    _btn.addEventListener("click",function(){
        _nick = document.getElementById("nickname").value;
        document.getElementById("welcome").innerHTML = _nick;
        localStorage.nickname = _nick;
    });
};

既然需求是即使重启浏览器也不丢失数据，那么这里自然选择localStorage而不是sessionStorage。存储的数据是键值对，可通过setItem()方法设置：

window.localStorage.setItem("Key","Value");

用getItem()方法取得对应键的值：

window.localStorage.getItem("Key");

不过其实也可以不调用setItem()或getItem()方法，直接在sessionStorage或localStorage对象上设置和获取数据，再省去写window对象的话，就变成这样：

localStorage.key = "value";

当点击确定键的时候，把文本框中输入的值取出作为键“nickname”的值存入localStorage，以后当页面加载的时候，就再把“nickname”对应的值取出放入页面元素里。逻辑差不多就是这样并不复杂。

除了setItem()和getItem()方法之外，其他一些常用属性和方法这里大概说明一下：

通过 length 可获得目前Storage对象中键值对的数量；

key(index) 方法获取指定索引值的键；

removeItem(key) 删除数据项；

clear() 能删除存储列表中的所有数据。

它们每一个的具体用法这里就不多介绍了。目前的浏览器基本都可以查看到sessionStorage和localStorage中的数据。以Chrome为例，F12打开开发者工具，选择“Resources”，然后左侧的菜单里就有Local Storage和Session Storage了。点击选择，便可以看到对应的数据。

上一篇我们创建了一个Git仓库，并在这个仓库里提交了一个文件。我们先对这个文件的内容做些修改，加上一些话什么的随意。然后，双击打开你的Git Bash，进入仓库目录，添加，提交。

$ cd f:/test
$ git add .
$ git commit -m "修改了内容"

相信都还有印象对吧。那么，接下来就把这个文件上传到GitHub上去。

因为本地的Git仓库和GitHub的远程仓库之间的传输是通过SSH加密的，所以我们需要一个SSH Key。先去你的用户主目录下看看有没有一个.ssh文件目录，如果没有的话，我们就需要先创建一个。再打开一个Git Bash，或者就刚才你开那个，先转移到主目录去：

$ cd ~

创建SSH Key：

$ ssh-keygen -t rsa -C "你的email地址"

然后一路回车，密码留空就行了。当然如果你说你很在意安全问题的话，随意。一切顺利的话在你的主目录里应该就有一个.ssh目录了，里面有两个文件：id_rsa和id_rsa.pub。其中id_rsa是私钥，保管好了，另一个id_rsa.pub是公钥，也就是我们接下来要用到的。登录你的GitHub账户，点击右上角的齿轮图标进入设置界面，左侧菜单里选择“SSH Keys”，之后右边点击“Add SSH Key”。“Title”随意填，然后打开你那个id_rsa.pub文件，把里面的内容复制到“Key”里面，最后点击“Add Key”搞定。有图有真相：

你也可以添加多个，比如家里一个公司一个。一切顺利接下来我们添加一个远程仓库。点击右上角的“New repository”，进入添加新仓库的界面，“Repository name”里填入你的项目名称，比如这里先填test。其他默认，然后点击“Create repository”完成创建。这样创建出来的Git仓库是对所有人可见的哦。有需要的土豪们也可以选择把该仓库设置为私有，嗯，每个月7美刀。

创建完成之后应该会有一个引导页面，告诉你接下来该怎么做。我们要把我们那个test.txt上传到这个仓库。那么打开你的Git Bash，确定你在仓库文件夹下了，之后先关联你的远程仓库：

$ git remote add origin https://github.com/beehoo/test.git

注意把地址换成你自己的。接着把本地仓库的内容推送到你刚建立的远程仓库里：

$ git push -u origin master

“origin”是Git默认远程主机名，master是分支。关于分支，Git会自动创建一个名为“master”的主分支，你的操作默认也都是在master分支上进行的。当然你也可以自己创建分支，这里暂时先不说。第一次推送加上“-u”的参数，会把本地master分支和远程master分支关联起来。今后你要把本地的更新再推送到远程，可以直接：

$ git push origin master

推送时提示输入你的GitHub用户名和密码，输入之后回车。返回信息后表示成功了。

那如果我在家里推送了更新，第二天到了公司我要如何取得这些更新呢？如果你公司的电脑里还没有项目目录，可以先从你的GitHub上clone一份。

$ git clone https://github.com/beehoo/test.git

这样就从远程仓库里克隆了一份一样的版本库到你的机子上了。既然已经有了，那以后要如何取得更新呢？两种方法，第一种：

$ git fetch origin master

第二种：

$ git pull origin master

两者的区别在于后者会自动合并而前者不会。如果你嫌麻烦就用后者吧。

关于Git，它是一种分布式版本控制系统。如果你用过CVS或者SVN，那么你只要知道Git它也从事着差不多的工作就够了。至于它们之间的区别，请自行百度一下我就不多介绍了。那么为什么要学习了解Git呢？嗯，什么公司项目有版本控制的需求之类的我才不管呢。知道GitHub嘛？想用嘛？虽然有些本末倒置但想就够了来学Git吧。（不想的你打算把这篇拿来当小说看看我也挺欢迎的）

首先当然是安装。如果你是在Linux环境下，以Ubuntu为例，一句命令“sudo apt-get install git”搞定。 如果是Windows，先去Git官网下载Git的安装包回来安装。能看懂英文的安装过程中稍微注意下按需勾选，看不懂的话一路默认“下一步”问题也不大。安装完成后应该会有一个“Git Bash”，长这个样子的：

（终于有图有真相了！这里该有掌声！）

注意：Windows下的用户你今后所有的Git命令操作都应该在这里面进行。千万不要用自带的CMD去操作Git，不然你后面被坑了别怪我没提醒你。

OK下面该来点实际的了。这里的操作都以Windows为环境。打开那个Git Bash，先需要进行一些配置。输入两条命令：

$ git config --global user.name "你的名字"
$ git config --global user.email "你的email"

因为Git毕竟是一个“分布式版本控制系统”，登记一下个人信息也方便别人知道你是谁是吧。

然后，假设我要在F盘下建立一个名为“test”的文件夹并进入这个文件夹，那么输入命令：

$ cd f:
$ mkdir test
$ cd test

没什么错误信息的话你应该已经在test这个文件夹里了。接着我们再执行一条命令把这个文件夹变成Git仓库：

$ git init

请大力敲击你的回车！（反正又不是我的敲坏了不心疼）你已经成功初始化了一个Git仓库！这时候我们进入刚才建立的test文件夹看看，是不是多了一个.git的目录？什么你说没有？“工具-文件夹选项-查看”把显示隐藏文件的选中，然后点击应用再看看。如果还没有，身后那堵墙请自便。关于.git这个目录，你可以暂时不管它是做什么的，只要记住别手贱乱改里面东西就成。

好，我们假设你到目前为止都很顺利的成功了，那么恭喜你还是很有天分的！继续吧~我们在test这个目录里创建一个文本文件（随便是什么反正你之后肯定会把它删了的），比如test.txt。然后里面随便写些什么，比如：Beehoo是个好青年！嗯，快保存我们继续。这一切都ok了，我们继续回到Git Bash里面敲命令：

$ git add test.txt

如果没有出现任何错误提示信息，那么恭喜你成功的把test.txt这个文件添加到了仓库中。如果你改了多个文件该咋办呢？这样吧：

$ git add .

一个点就代表当前目录，这样当前目录下的所有修改过的或新创建的文件就都被添加到仓库里了。我一般都是这么干的，方便。添加到仓库并不代表就完了，它只是把文件放到了暂存区。之后要提交，也就是把暂存区里的内容提交到当前分支。暂时不清楚神马暂存区咯分支咯也没关系，先有个印象就行。

$ git commit -m "为人为己拜托你就在这儿说点儿啥吧"

加上-m参数然后留下一些说明信息，比如你修改了什么。看到一些温和的提示信息之后恭喜你提交成功了。

好，到这里我们先总结一下。首先，我们初始化了一个Git仓库。之后，这个仓库里今后所有新增、修改的文件先添加后提交。

$ git init
$ git add xxx
$ git commit -m "xxx"

下一篇，我们把提交了的这个文件上传到GitHub上。请没有GitHub账号的赶紧先去注册一个。本篇至此，感谢阅读。