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来补上这些空隙!很直接的逻辑吧!具体实现过程可以参照下面截图!注意这个方法必须紧接在每次更新墙面(容器)前!
然后基本上所有重要的事情就完成了。这样你就可以达到下面的效果!
相关文章
- Kubernetes增强型调度器Volcano算法分析
- 从里德-所罗门算法到Flex EC,数学是华为云真正的“硬核”
- Python经典算法-猴子吃桃-思路分析
- Java实现蓝桥杯VIP算法训练 数组逆序排列
- Java实现 蓝桥杯 算法训练 2的次幂表示
- 视频分类算法
- 数据结构与算法之美-1 复杂度分析 [MD]
- Python实现的选择排序算法原理与用法实例分析
- Python实现的选择排序算法原理与用法实例分析
- kylin分析引擎:运行原理、维度和Cube等名词解释、核心算法
- 几种java线程池的实现算法分析
- Algorithm:C++语言实现之动态规划算法相关(矩阵连乘状态转移方程、字符串的交替连接、分析格网棋盘的特点、最短路线问题、生产计划问题、动态规划解下列非线性规划)
- 二分查找算法
- android 面试算法题 实现单链表反转
- 【Python算法】分类与预测——logistic回归分析
- 一个基于matlab的标准PSO粒子群优化算法仿真
- 基于布谷鸟算法优化的lssvm回归预测-附代码
- 智能优化算法:战争策略算法-附代码
- 【阶段三】Python机器学习32篇:机器学习项目实战:关联分析的基本概念和Apriori算法的数学演示
- 1967. 作为子字符串出现在单词中的字符串数目字符串模式匹配-kmp算法和kmp优化算法(双百代码)
- 白话经典算法系列之中的一个 冒泡排序的三种实现
- 算法分析与设计入门-搜索策略
- 基于矩阵分解的推荐算法,简单入门
- 无监督和有监督算法的区别
- 数据结构与算法详解(含算法分析、动图图解、Java代码实现、注释解析)
- 【状态估计】用于描述符 LTI 和 LPV 系统的分析、状态估计和故障检测的算法(Matlab代码实现)
- 目标分割算法之连通域分析
- 【排序算法】冒泡排序、简单选择排序、直接插入排序比较和分析