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砌體高度 - 在容器底部填充間隙

回答

相關問題