【首发原创】Mansory 算法分析
- - HTML5研究小组相信大家对 mansory排版算法印象十分深刻，它能够十分有效的实现页面紧凑排版，节省空间，并且还显得十分美观. 在很多网站，包括鼎鼎有名的 pinterest都使用了这个算法来实现排版. 这个过程有点象瓦匠在码砖头，所以我会有时候称这些div为brick（砖头），容器为墙面!. 有一个现象不知道大家注意否，这个排版的方法对于输入是很敏感的.
【首发原创】Mansory 算法分析
标签：
HTML5
技术博文
HTML5前沿技术
HTML5学习资源
| 发表时间：2012-05-15 00:04 | 作者：HTML5研究小组
出处：http://www.mhtml5.com
作者 @jCuery
相信大家对 mansory排版算法印象十分深刻，它能够十分有效的实现页面紧凑排版，节省空间，并且还显得十分美观。在很多网站，包括鼎鼎有名的 pinterest都使用了这个算法来实现排版。这个过程有点象瓦匠在码砖头，所以我会有时候称这些div为brick（砖头），容器为墙面!
有一个现象不知道大家注意否，这个排版的方法对于输入是很敏感的。所谓的输入就是指需要进行排版的 div块。进一步说对于不同的输入，结果可能是大相迳庭的。这个不同可以从两个方面来定义：第一，顺序的不同；第二，大小的不同。这个只需要稍微思考下就可以明白的。不信的话大家可以做些试验！
首先如果先不考虑细节的问题，正常逻辑应该是这样实现：
- 1. 输入为一个数组，也就是我们需要进行排版的div；
- 2. 中间进行对于这个数组按顺序遍历，每次遍历需要做一些工作（主要就是定位）；
- 3. 输出还是这个数组，不过他们的位置都已经进行过从新定位了；
那么在第二步，需要一个 placeBrick方法来做码砖头的事情了。它的输入其实就是每个砖头。输出就是码好的砖头。就这么简单！
具体步骤为拿到一个brick
- 看墙面（容器）现在的高度（轮廓）；
- 找到可以容纳这个brick且不会和brick重叠，但又是最低处的墙面（位置）。
- 放置此brick，更新墙面（容器）状态；
- 迭代这个过程，直到所有的brick用完；
上面就是整个算法的核心部分！下载下来源码以后，你只要搞清除了这个部分，整个插件你就基本掌握了。虽然这部分代码站整个代码的20%不到，但绝对值得你用80%的精力来研究。剩下的80%只需要20%时间过一下就好！
其余的20%可以留意看看它如何做resize重新计算以及新的brick如何加载上来的。都是基于理解上面的核心代码的基础上！
分析完了这个算法以后，可以对这个算法进行一些修改来为我所用。比如空隙这个问题，它十分依赖于输入的顺序和大小！
如果大小都是一样，尤其是宽度一致的div应该是不会有这个问题的。对于排版来说要保证div宽度一致也是不可能的。经常会有各种宽度的div需要排版。那么大小无法改变了，可以尝试调换输入的顺序。不过这个逻辑会十分复杂。神人们可以尝试一下！我属于笨鸟，选者想办法记录下每个空格的位置，然后利用事先准备好的div来补上这些空隙！很直接的逻辑吧！具体实现过程可以参照下面截图！注意这个方法必须紧接在每次更新墙面（容器）前！
然后基本上所有重要的事情就完成了。这样你就可以达到下面的效果！
结束语：
其实这个算法不算复杂（10年十佳插件），但值得研究的东西还是有些：
- 如何利用调整顺序的方案来达到最小空隙？或者有更好的办法？
- 是否可以做到从下向上排，从左往右边，或者右往左呢？或者从中心往四周扩散呢？
- 做个html5版本？（这个应该不难）
代码下载：file:///D:/My%20Documents/Downloads/jquery.masonry.patch.js
相关 [原创 mansory 算法分析] 推荐：
Paxos算法分析
- chuang - Schooner中国技术团队Paxos 算法要解决的问题是在一个分布式系统中如何就某个值（提案）达成一致. 是一个非常基础而且经典的算法，也是目前最有效的一个算法. 【来自Schooner中国团队，转载请申明】. prepare 阶段：
proposer 选择一个提案编号 n 并将 prepare 请求发送给 acceptors 中的一个多数派；.
云存储中的HTTP鉴权算法分析
- - 忘我的追寻基于Base64编码的 HTTP Basic Authentication由于安全问题，已经不再广泛使用了. 在云存储中，数据的安全性一直被广泛关注. 亚马逊的AWS S3和Openstack Swift分别采取了不同的算法来对每一个HTTP请求进行鉴权. 这里想对二者的鉴权过程作简单分析和总结.
[转]排名算法（二）--淘宝搜索排序算法分析
- - 工作笔记原文：https://blog.csdn.net/u011966339/article/details/78052569 . 淘宝搜索排序的目的是帮助用户快速的找到需要的商品. 从技术上来说，就是在用户输入关键词匹配到的商品中，把最符合用户需求的商品排到第一位，其它的依次排在后续相应的位置. 为了更好的实现这个目标，算法排序系统基本按三个方面来推进：.
知名网站热门排序算法分析
- - 标点符很多内容网站都会根据用户的交互信息等对内容进行排序. 这里整理了一些比较知名的内容网站的排序规则，每个网站都有不同，在此过程中，我们不仅仅要了解其排序规则（公式），更多的期望了解公式背后的逻辑. Hacker News 是一家关于计算机黑客和创业公司的社会化新闻网站，由 Paul Graham 的创业孵化器 Y Combinator 创建.
ETL概述(原创)
- - ITeye博客ETL，Extraction- Transformation-Loading的缩写，即数据抽取（Extract）、转换（Transform）、装载（Load）的过程，它是构建数 据仓库的重要环节. ETL是将业务系统的数据经过抽取、清洗转换之后加载到数据仓库的过程，目的是将企业中的分散、零乱、标准不统一的数据整合到一起，为 企业的决策提供分析依据.
PL/SQL动态SQL(原创)
- - ITeye博客使用动态SQL是在编写PL/SQL过程时经常使用的方法之一. 很多情况下，比如根据业务的需要，如果输入不同查询条件，则生成不同的执行SQL查询语句，对于这种情况需要使用动态SQL来完成. 再比如，对于分页的情况，对于不同的表，必定存在不同的字段，因此使用静态SQL则只能针对某几个特定的表来形成分页.
将原创进行到底
- - 杨晖的博客-TV2.0的实验田——来源《投资者报》 记者 占昕.
“六年前的某一天，杨晖来到我当时工作的外滩中心楼下的咖啡厅，她对我讲她要办一个叫《波士堂》的电视节目. 俺当时心里咕嘟着，‘她也太想当boss了吧’. ”这是唯众六周年晚宴，睿狮广告传播的首席战略官沈柏屏在留言卡片上写下的一段话. 或许你尚来不及知道她的名字，但你一定知道《波士堂》、《谁来一起午餐》、《开讲啦》、《这会儿不上班》等风靡全国的电视节目.
[原创] 国人原创咆哮体《哔哔儿你伤不起》
- Tony - 黑莓时光这是来自新浪微博上的国人哔哔儿 廖小肥 的原创咆哮体内容，非常犀利也非常有爱，快快分享阅读. 《哔哔儿你伤不起》| 原创咆哮体 by @廖小肥. 谁跟老子讲黑莓是世界上最屌的手机啊. 尼玛谁说黑莓在911事件中一战成名啊. 那是因为老外的黑莓都开通BIS和BES啊. 国内玩黑莓的淫才TM百分之几啊.
Linux Deepin 开始招募原创团队
- Acumon - Wow! Ubuntu为了支持 Linux Deepin 的长期发展，我们已经成立武汉深之度科技有限公司，为 Linux Deepin 发行版和社区提供有力的后续支持. 武汉深之度科技将与 linux deepin 社区共同致力于与研发最优秀的桌面Linux系统，推进Linux在中国乃至全球的桌面应用. 目前，我们已经有了多名同事，分别从事开发，维护，设计，文档，测试等工作，还需要更多有理想也有趣的伙伴，欢迎你的加入.