jquery砌体高度 - 在容器底部填充间隙

我已经开始使用jQuery Masorny插件，我使用固定宽度为190px的图像，并且它在一个问题旁边工作正常。当然，每列的底部都有空白，我想用一些背景填补这些空白。如果我将背景设置为容器，那么它也会影响每个元素之间的gutterWidth。有没有办法在每列的底部添加一些空的div，或者其他可以让底部空白的样式？jquery砌体高度 - 在容器底部填充间隙

我砌体初始化代码：

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

我看了其他关于砌体问题以及文件中的问题，似乎没有提到。

由于

来源

2012-07-20 Maor Barazany

你能解释为什么它自然会在底部有空隙吗？砌体中的每块砖可以像墙壁一样粘在一起，并且墙壁没有间隙？ – Bytemain 2012-07-20 00:34:43

是的，砖块粘在一起，但看起来图像高度的总和并不总是与容器的高度完全一样，所以它的余下部分变成了每一列底部的这些间隙。 – 2012-07-20 01:53:50

没有一种方法来填充在每一列的底部的间隙，因为砌筑排序在垂直顺序的砖，然后在水平方向顺序。它类似于装箱算法，其中一些附加数学与树图算法类似。 bin-packing alogrithm的想法是尽可能减少固定数量砖块堆积在柱子中所需的柱子数量。这是一个完整的问题，当然你在底部（或顶部）有间隙，这些间隙不能填充。

对于树形图，您可以使用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

来源

2012-07-20 02:02:40 Bytemain

感谢Chiyou，我知道这一点，我同意底部的空白已经最小化了。不过，我想知道是否有办法让我们说在图像下方每列的底部添加一个空的div，并使该div的空白高度为该列中的最后一个图像，直到容器的底部边界。那么该div也可以添加背景。我试图看看也许是一个JS方法来计算这些高度，但还没有弄清楚这一点。 – 2012-07-20 02:15:17

它最大化不会最小化。你想最大化你的利润而不是最小化。这是不可能的，或者你必须编写自己的算法。 – Bytemain 2012-07-20 02:22:06

我的意思是通过网格将间隙最小化，从而使边缘处的底部（或顶部）间隙最小化。你是否熟悉另一个jQuery/JS插件，可以支持这种“封闭”的边缘？ – 2012-07-20 02:29:09

jquery砌体高度 - 在容器底部填充间隙

回答

相关问题