How to bind a dynamic DIV to Jquery Masonry plugin?

Question

I have some DIV\'s in my HTML that I load dynamically using AJAX.

$(\"#workPanel\").load(\"ex.html\");

I also have some static links that onclic

Answer 1

You are loading it like:

$('#primary').masonry({
    columnWidth: 100, 
    itemSelector: '.box:not(.invis)',
    animate: true,
    animationOptions: {
        duration: speed,
        queue: false
    }
});

Ok, so you've defined the masonry options. Now, right after that, let's create a function and bind some events:

var masonryUpdate = function() {
    setTimeout(function() {
        $('#primary').masonry();
    }, 500);
}
$(document).on('click', masonryUpdate);
$(document).ajaxComplete(masonryUpdate);

Never worry about it again!

Answer 2

I think this is what you're after:

To run masonry again you need to shuffle once the .load() completes, you can do this by running it as the callback function, like this:

$("#workPanel").load("ex.html", function() {
  $('#primary').masonry();
});

Answer 3

Here is an example of adding items dynamically to a masonry collection:

http://masonry.desandro.com/demos/adding-items.html

Basically, you need to call the "reload" masonry option.

For example to insert the jQuery item "newElement" into the #holder div:

jQuery("#holder").prepend(newElement).masonry('reload')