上篇文章我们我们对masonry的基本使用做了入门介绍，本篇将会进一步对masonry布局的实现原理进行剖析，来了解上文中的有些规定到底是为啥。

masonry对于每个砖块的定位都采用绝对定位，即通过position、 top、 left ，position设为 absolute，在通过top和left的值来进行定位，因为top和left是相对于其外面的容器的，这也就是为啥所有砖块必须被设置在一个容器(container)中了。通过计算得出每个砖块的位置，然后先横向在纵向的方式进行排列。以上文的例子为例，每个砖块的宽度是140px，下面我们借助页面分析工具(我用的是chorme)还看下：

每行7个砖块，由上图可看到第1行的top都为0px，按照从左到右的顺序，先横向定位，在纵向定位，即一行满后在定位下一行。第2行top为196px，这是因为目前每个砖块的高度是196px。在看下left值，可以发现masonry是严格按砖块宽度(columnWidth参数)设置的，0、140、280、420、560、700、840 按砖块宽度140的整数倍。

如果我们将第1个砖块的宽度变为150px(手工加了个style="width:150px;")，即大于1个砖块的宽度，小于俩个砖块的宽度。看下效果：

由红色标记可以发现，第1个砖块和第2个砖块被合并了，这就是masonry跨列的原理。即：如果某个砖块的宽度超出了规定的宽度，将产生合并，以满足它的宽度要求。

另外，可以注意下，由于第1块的高度变小了(178px)，第2行的前俩个的top也变化了，由此可知，masonry是按砖块的实际高度来计算top的，这与left的计算不同。

注意：

top和left是相对于整个盒子模型与外围容器的距离，所以在计算砖块的宽度(设置columnWidth参数)时应将margin、border、padding的值计算在内，如下图：