【首发原创】Mansory 算法分析

标签: HTML5 技术博文 HTML5前沿技术 HTML5学习资源 | 发表时间:2012-05-15 00:04 | 作者:HTML5研究小组
出处:http://www.mhtml5.com

作者 @jCuery

相信大家对 mansory排版算法印象十分深刻,它能够十分有效的实现页面紧凑排版,节省空间,并且还显得十分美观。在很多网站,包括鼎鼎有名的 pinterest都使用了这个算法来实现排版。这个过程有点象瓦匠在码砖头,所以我会有时候称这些div为brick(砖头),容器为墙面!

有一个现象不知道大家注意否,这个排版的方法对于输入是很敏感的。所谓的输入就是指需要进行排版的 div块。进一步说对于不同的输入,结果可能是大相迳庭的。这个不同可以从两个方面来定义:第一,顺序的不同;第二,大小的不同。这个只需要稍微思考下就可以明白的。不信的话大家可以做些试验!

首先如果先不考虑细节的问题,正常逻辑应该是这样实现:

  1. 1. 输入为一个数组,也就是我们需要进行排版的div;
  2. 2. 中间进行对于这个数组按顺序遍历,每次遍历需要做一些工作(主要就是定位);
  3. 3. 输出还是这个数组,不过他们的位置都已经进行过从新定位了;

那么在第二步,需要一个 placeBrick方法来做码砖头的事情了。它的输入其实就是每个砖头。输出就是码好的砖头。就这么简单!

具体步骤为拿到一个brick

  1. 看墙面(容器)现在的高度(轮廓);
  2. 找到可以容纳这个brick且不会和brick重叠,但又是最低处的墙面(位置)。
  3. 放置此brick,更新墙面(容器)状态;
  4. 迭代这个过程,直到所有的brick用完;

上面就是整个算法的核心部分!下载下来源码以后,你只要搞清除了这个部分,整个插件你就基本掌握了。虽然这部分代码站整个代码的20%不到,但绝对值得你用80%的精力来研究。剩下的80%只需要20%时间过一下就好!

其余的20%可以留意看看它如何做resize重新计算以及新的brick如何加载上来的。都是基于理解上面的核心代码的基础上!

分析完了这个算法以后,可以对这个算法进行一些修改来为我所用。比如空隙这个问题,它十分依赖于输入的顺序和大小!

如果大小都是一样,尤其是宽度一致的div应该是不会有这个问题的。对于排版来说要保证div宽度一致也是不可能的。经常会有各种宽度的div需要排版。那么大小无法改变了,可以尝试调换输入的顺序。不过这个逻辑会十分复杂。神人们可以尝试一下!我属于笨鸟,选者想办法记录下每个空格的位置,然后利用事先准备好的div来补上这些空隙!很直接的逻辑吧!具体实现过程可以参照下面截图!注意这个方法必须紧接在每次更新墙面(容器)前!

然后基本上所有重要的事情就完成了。这样你就可以达到下面的效果!

结束语:

其实这个算法不算复杂(10年十佳插件),但值得研究的东西还是有些:

  • 如何利用调整顺序的方案来达到最小空隙?或者有更好的办法?
  • 是否可以做到从下向上排,从左往右边,或者右往左呢?或者从中心往四周扩散呢?
  • 做个html5版本?(这个应该不难)

微博: http://weibo.com/jcuery

邮件:[email protected]

代码下载:file:///D:/My%20Documents/Downloads/jquery.masonry.patch.js

 

相关 [原创 mansory 算法分析] 推荐:

【首发原创】Mansory 算法分析

- - HTML5研究小组
相信大家对 mansory排版算法印象十分深刻,它能够十分有效的实现页面紧凑排版,节省空间,并且还显得十分美观. 在很多网站,包括鼎鼎有名的 pinterest都使用了这个算法来实现排版. 这个过程有点象瓦匠在码砖头,所以我会有时候称这些div为brick(砖头),容器为墙面!. 有一个现象不知道大家注意否,这个排版的方法对于输入是很敏感的.

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在中国乃至全球的桌面应用. 目前,我们已经有了多名同事,分别从事开发,维护,设计,文档,测试等工作,还需要更多有理想也有趣的伙伴,欢迎你的加入.