Question

我已经开始使用jQuery Masorny插件了，我使用固定宽度为190px的图像，除了一个问题之外它还能正常工作。当然每列的底部都有间隙，我想用一些背景来填补这些空白。如果我将背景设置为容器，它也将与每个元素之间的gutterWidth相对应。有没有办法在每个列的底部添加一些空div，或者其他一些会让底部有空格的样式？

我的Masonry初始代码：

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

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

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

http://maorb.dyndns-ip.com/masonrytest

我已经查看了有关砌体的其他问题以及文件中的内容，似乎没有提及。

由于

Answer 1

没有办法填补每列底部的空白，因为砖石按照垂直顺序对砖进行排序，然后按水平顺序排列。它类似于bin-packing算法，其中一些额外的数学类似于treemap算法。 bin-packing算法的想法是最小化固定数量的砖堆叠在列中所需的柱数。这是一个完整的问题，当然你在底部（或顶部）有间隙，这些间隙无法填补。

对于树形图，您可以使用kd树。这里有一个很好的描述：http://www.blackpawn.com/texts/lightmaps/default.html。

{
   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] )

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

enter image description here

jquery砌体高度 - 填充容器底部的空隙

1 个答案: