CODEWITHSUNDEEP
jqueryjquery-masonry
abiku
abiku

Reputation: 2246

JQuery Masonry doesn't refresh the container height

Using Jquery Masonry which works fine. However i have small problem. Layout looks like:

<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>

After the masonry is initialized after page is loaded with:

$('.container').masonry ( {        
    itemSelector: '.box'
});

i'm trying to use Ajax call to replace the boxes with some other. before ajax im using:

$('.container').masonry( 'remove', $('.container .box'));

and after it is loaded :

$('.container').prepend(data).masonry( 'appended', data );

it loads all new boxes and auto positione it with masonry but it also leaves a big gap on the top of the container. New boxes are added not at the top of the container but exactly in the same position where removed boxes ended. I was trying to use some masonry functions like reloadItems, layout etc but nothing helps :( Anyone knows the solution to my problem?

Upvotes: 2

Views: 3152

Answers (2)

Jeff Steil
Jeff Steil

Reputation: 1770

I just ran into this issue, my solution was to:

1 Remove the original items.

2 Remove the masonry functionality on the element.

3 Re-initialize the masonry functionality on the element.

4 Then add the new items using prepend.

//These were defined globally.
var masonryOptions = {
   columnWidth: 450,
   itemSelector: '.feature-block',
   gutter: 20
};

$grid = $('.masonry-grid').masonry(masonryOptions);

function clear() {
   $grid.masonry('remove', $grid.find('.feature-block'));
   $grid.masonry('destroy');
   $grid = $('.masonry-grid').masonry(masonryOptions);
}

Upvotes: 0

Bartek Maki Makoś
Bartek Maki Makoś

Reputation: 172

You're mixing two opposite methods - prepend and append. It seems that Masonry needs to know exactly on which side your adding your elements. Take a look at the docs example:

http://masonry.desandro.com/methods.html#prepended

At first hit lets just try to change your code to: 

$('.container').prepend(data).masonry( 'prepended', data );

Upvotes: 2

Related Questions