Mansory算法分析

相信大家对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来补上这些空隙！很直接的逻辑吧！具体实现过程可以参照下面截图！注意这个方法必须紧接在每次更新墙面（容器）前！

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

Mansory算法分析相关推荐

Mansory 算法分析
相信大家对mansory排版算法印象十分深刻,它能够十分有效的实现页面紧凑排版,节省空间,并且还显得十分美观.在很多网站,包括鼎鼎有名的pinterest都使用了这个算法来实现排版.这个过程有点象瓦匠 ...
基于FCN，U-Net的深度学习医学影像分割算法（细胞分割算法）以及传统算法分析
本博文主要分析了基于传统计算机视觉的细胞分割算法和基于深度学习的细胞分割算法.主要针对医学影像分割算法.包括了FCN全卷积网络的细胞分割效果,U-Net细胞分割效果.查阅了采用深度学习分割医学影像的几 ...
Weiss的数据结构与算法分析（C++版）源码编译说明
最近尝试编译Weiss的那本数据结构与算法分析(C++版)提供的源代码时,遇到一些问题,特记录如下: 考虑到该书提供的代码是使用模板技术较多,这在提供简洁代码的同时,也给源码的编译带来了一些问题.因而 ...
反汇编算法介绍和应用——递归下降算法分析
上一篇博文我介绍了Windbg使用的线性扫描(linear sweep)反汇编算法.本文我将介绍IDA使用的递归下降(recursive descent)反汇编算法.(转载请指明来源于breaksof ...
数据结构与算法分析（C++版）（第二版）
查看书籍详细信息: 数据结构与算法分析(C++版)(第二版) 内容简介本书采用程序员最爱用的面向对象C++语言来描述数据结构和算法,并把数据结构原理和算法分析技术有机地结合在一起,系统介绍了各种类型 ...
总结：DCIC算法分析赛完整方案分享！
↑↑↑关注后"星标"Datawhale 每日干货 & 每月组队学习,不错过 Datawhale干货作者:阿水,北航计算机硕士,Datawhale成员 DCIC2020 本 ...
算法分析赛：从数据中挖掘价值，72万奖金，DCIC 2020 大数据赛道来了！
01 DCIC 2020:数字中国创新大赛 DCIC 是国内赛事中少有的开放政府真实数据的经典赛事,除了高知名度,高影响力,高奖金,对能力履历,学术研究和企业技术应用都提供了很好的机会.作为数字中国 ...
线性排序算法分析总结
线性排序(Linear sort),指的是时间复杂度为 O(n) 的排序算法.之所以时间复杂度能达到线性,是因为这种排序不是基于比较的,但它的适用场景也有很大的局限性. 线性排序有三种:桶排序.计数 ...
python数据结构与算法分析_数据结构与算法（Python版）
为什么研究数据结构与算法本周带大家进入Python版数据结构与算法的学习.想必大家都听过"算法"一词,算法的学习对编程者来说是至关重要的.首先我们先了解一下为什么要研究数据结构与 ...

Mansory算法分析

Mansory算法分析相关推荐

最新文章

热门文章