jquery砌体高度-填充容器处的间隙'；水底

我已经开始使用jQuery插件，我使用固定宽度为190px的图像，除了一个问题之外，它工作得很好。当然，每一列的底部都有空白，我想用一些背景来填补这些空白。 如果我为容器设置背景，它也将位于每个元素之间的檐槽宽度。有没有办法在每列的底部添加一些空div，或者其他方法可以让样式在底部有间隙

我的初始代码：

jQuery(document).ready(function(){
        var $gal = jQuery('#gallery');

        $gal.imagesLoaded( function(){
         $gal.masonry({
            itemSelector : '.item',
            columnWidth: 190,               
            isFitWidth:true,
            gutterWidth:2
          });
        });
    });

这是一个工作演示，还有一个我尝试实现的屏幕截图：

我看了其他关于砖石的问题，也看了文献资料，似乎没有提到

---

多亏了没有办法填补每根柱子底部的空隙，因为砖石结构先按垂直顺序，然后按水平顺序排列砖块。它类似于装箱算法，有一些额外的数学，类似于树映射算法。料仓堆垛法的理念是尽量减少堆垛固定数量砖块所需的立柱数量。这是一个np完全问题，自然在底部（或顶部）有缺口，这些缺口无法填补

对于树映射，可以使用kd树。这里有一个很好的描述：

htmlx和html5填充问题很容易解释。你有一个填充：8px；在html5文档的body标记中。因此，在图像和周围图像的每侧4px之间有一个间隙。请看我的照片：

---

你能解释一下为什么底部有空隙是很自然的吗？砖石结构中的每一块砖都可以像墙一样粘在一起，而墙是没有缝隙的？是的，砖是粘在一起的，但似乎图像的高度总和并不总是与容器的高度完全相同，所以其他部分就变成了每根柱子底部的这些缝隙。谢谢Chiyou，我知道这一点，我也同意底部的差距已经最小化了。但是，我想知道是否有一种方法，比如说在图像下方的每列底部添加一个空div，并使该空div的高度从该列中的最后一个图像一直到容器的底部边界。然后该div也可以添加为背景。我想用js的方法来计算这些高度，但我还没弄明白，它是最大化的，不是最小化的。你想要最大化你的利润，而不是最小化。这是不可能的，或者你必须编写自己的算法。我的意思是通过网格最小化间隙，从而在边缘处最小化底部（或顶部）间隙。你是否熟悉另一个jQuery/JS插件，它可能支持这样的边缘“关闭”功能？我认为同位素并不是免费的，但它也是免费的。同位素私人免费，商业收费25美元。但我检查了一下，似乎它是基于砖石结构，所以我怀疑同位素是否能做到。我想写一些JS，在砖石之后运行，以确定容器中的损耗和容器边界之间的高度，并尝试在其中插入一些div，但我还不知道如何插入。

{
   Node* child[2]
   Rectangle rc
   int imageID
}

Node* Node::Insert(const Image& img)
if we're not a leaf then
    (try inserting into first child)
    newNode = child[0]->Insert( img )
    if newNode != NULL return newNode

    (no room, insert into second)
    return child[1]->Insert( img )
else
    (if there's already a lightmap here, return)
    if imageID != NULL return NULL

    (if we're too small, return)
    if img doesn't fit in pnode->rect
        return NULL

    (if we're just right, accept)
    if img fits perfectly in pnode->rect
        return pnode

    (otherwise, gotta split this node and create some kids)
    pnode->child[0] = new Node
    pnode->child[1] = new Node

    (decide which way to split)
    dw = rc.width - img.width
    dh = rc.height - img.height

    if dw > dh then
        child[0]->rect = Rectangle(rc.left, rc.top, 
                                   rc.left+width-1, rc.bottom)
        child[1]->rect = Rectangle(rc.left+width, rc.top, 
                                   rc.right, rc.bottom)
    else
        child[0]->rect = Rectangle(rc.left, rc.top, 
                                   rc.right, rc.top+height-1)
        child[1]->rect = Rectangle(rc.left, rc.top+height, 
                                   rc.right, rc.bottom)

    (insert into first child we created)
    return Insert( img, pnode->child[0] )