每次在浏览自己的网站时，都会感觉异常的卡顿，甚至第一次打开网站都需要加载好久好久，滑动鼠标也感觉没有那么的流畅，而且装饰的CSS着实有些太过于华丽，所以我准备从主题原版开始重新修改。我所使用的主题是Sakura3.4.0 三创作者樱花庄的白猫，但是这个版本有好多东西我都不喜欢，比如说暗夜模式切换，还有一些小细节的地方，都不是特别到位，所以我便在sakura-app.js options.php funtions.php里面，把我所有用不到的功能都删掉了，顺便移除了一些上古沉积 （Akina主题就开始遗留下来的无用代码，白猫三创时留下的无用代码移除之后，真的好多了呐！

整顿完过于华丽的特效CSS后，我便开始思考主页的文章布局，一直感觉首页文章列表的利用空间不是很大，特别是在大屏幕上感觉更加的奇怪，我的电脑屏幕是27寸+34寸的，所以800px的width实在是太窄了，但我也没有用百分率来设置width，不然后期会出现各种意想不到的CSS错版。最后选择了将文章列表页改成1000px。可是利用率还是很小，比如说小伙伴 雾时之森 的博客大概就是这样的，宽宽的，不适合写文章

在我冥思苦想不知如何是好时，有一位幸运的小伙伴加入了生物圈的QQ群，我打开他的博客一看，也是Sakura主题，然而它左下角的音乐组件出现了问题，于是我便中途打岔，转到了MetingJS的Github项目开始研究起MetingJS的正则表达式。在搜索一些表达式的途中，我无意间在搜索引擎看到了非常好的一个自适应瀑布流项目，叫做 Masonry 。我一想，用瀑布流来进行文章排版，岂不妙哉！然后我便开始研究Masonry，却惊奇的发现，我跟不需要懂它的排布原理，只需要用简单的五行JS和四行DIV标签就可以实现自动排版，说干就干。当我以为我已经成功的时候，我开始尝试发布了几篇帖子来进行测试，却发现根本不是想象的那样，见下图

发生了严重的错版，上下盒子没有对齐，空格很大，我改来改去，都无法达到上贴下的效果，后来开F12找了又找，终于发现了一个大问题，那就是Masonry根本没有发挥它的重排功能。

一直提示TypeError: $(...).masonry is not a function，我便去StackOverFlow找了找相关问题，果然站中有大神，指出是因为这个JS插件依赖于jQuery运行，而在插件被引入运行的时候，jQuery还没有被引入，于是我尝试了N种办法让jQuery优先于Masonry引入，却一点作用都没有，直到我看到官网说有两种引入方法，一个是Vanilla-js引入，另一个是jQuery引入，我就寻思，既然后者不通，那我就尝试前者。

搜索过程中发现 Vanilla-js 是当今最轻量的js框架，没有之一
当时我就在想，这么好的东西，为啥不用！！！直到我进入了 Vanilla 的官网才发现，我被骗了。
怎么无论我下载core还是别的什么文件都是0kb呢？打开下载的文件怎么什么内容都没有？？？当时我还半信半疑，重新下载了一边，但还是刚刚的结果，后来看到了底下的一个提示 “Final size: 0 bytes uncompressed, 25 bytes gzipped” “Show human-readable sizes” 我意识到事情不对了起来，后来发现Vanilla-js就是前端界的一个冷门笑话，其实Vanilla-js就是原生的js，根本不是什么新型框架。

好在最终通过原生的js引入，终于成功的将Masonry跑了起来，也成功地对我的首页进行了排版，但由于有时候文章加载很慢，所以文章还没出来，插件就停止工作了，于是我写了个settimeout来暂缓300ms让插件工作，效果很不错，在300ms文章框架加载完之后，Masonry就开始重排，于是就得到了当今博客首页的样子。为了突出瀑布流的特点，我还故意将文章摘要的字数限制从55个字改成了100字，这样就能使不通文章块的height不相同，更加随意。