CODEWITHSUNDEEP
jqueryjquery-masonry
Maor Barazany
Maor Barazany

Reputation: 761

jquery Masonry height - fill gaps at container's bottom

I've started using jQuery Masorny plugin, I use images with fixed width of 190px each and it works fine, beside one issue. Naturally there are gaps at the bottom of each column, I want to fill theses gaps with some background. If I set background to the container, it will be also behinde the gutterWidth that between each element. Is there a way to add some empty divs at the bottom of each columns, or something else that will let style that gaps in the bottom?

My Masonry init code:

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

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

Here is a working demo for this and also there a screenshot of what I try to achieve:

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

I've looked in other questions about Masonry and also in the documentry, it seems not to be mentioned.

Thanks

Upvotes: 0

Views: 3172

Answers (1)

Cybercartel
Cybercartel

Reputation: 12592

There isn't a way to fill the gaps at the bottom of each column because masonry sorts the bricks in vertical order and then in horizontal order. It's similar to a bin-packing algorithm with some additional math similar to a treemap algorithm. The idea of a bin-packing alogrithm is to minimize the amount of columns needed for a fixed amount of bricks to be stacked in the columns. This is a np complete problem and naturally you have gaps at the bottom (or top) and those gaps can't be filled.

For a treemap you can use a kd-tree. A good description is here: 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] )

The question with your htmlx and html5 padding problem is simple to explain. You have a padding:8px; in the body tag in the html5 document. so there is a gap between the image and the surrounding image of 4px on each side. See my picture:

enter image description here

Upvotes: 1

Related Questions