html5中文学习网

您的位置: 首页 > 视频教程 > JS视频教程 » 正文

Mansory算法分析

[ ] 已经帮助:人解决问题

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

LG6HTML5中文学习网 - HTML5先行者学习网

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

首先如果先不考虑细节的问题,正常逻辑应该是这样实现:LG6HTML5中文学习网 - HTML5先行者学习网

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

那么在第二步,需要一个placeBrick方法来做码砖头的事情了。它的输入其实就是每个砖头。输出就是码好的砖头。就这么简单!LG6HTML5中文学习网 - HTML5先行者学习网

具体步骤为拿到一个brickLG6HTML5中文学习网 - HTML5先行者学习网

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

LG6HTML5中文学习网 - HTML5先行者学习网

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

其余的20%可以留意看看它如何做resize重新计算以及新的brick如何加载上来的。都是基于理解上面的核心代码的基础上!LG6HTML5中文学习网 - HTML5先行者学习网

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

LG6HTML5中文学习网 - HTML5先行者学习网

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

LG6HTML5中文学习网 - HTML5先行者学习网

然后基本上所有重要的事情就完成了。这样你就可以达到下面的效果!LG6HTML5中文学习网 - HTML5先行者学习网

LG6HTML5中文学习网 - HTML5先行者学习网

结束语:

其实这个算法不算复杂(10年十佳插件),但值得研究的东西还是有些:LG6HTML5中文学习网 - HTML5先行者学习网

  • 如何利用调整顺序的方案来达到最小空隙?或者有更好的办法?
  • 是否可以做到从下向上排,从左往右边,或者右往左呢?或者从中心往四周扩散呢?
  • 做个html5版本?(这个应该不难)
(责任编辑:)
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助