Question

I am coding a single page javascript application that displays images, a la pinspire. The libraries that I’m using are jQuery(1.7.2) and the latest version of isotope.

I am trying to implement an infinite scroll in app. When you scroll to the bottom of the page, ajax talks to the server and returns an array of objects in JSON. This JSON is used to build several div with some info about each image, and the image itself.

I am appending each div as it’s created to the isotope enabled container. In the complete section of my ajax call, I am calling isotope(“reLayout”). This works well enough.

My issue is that adding a dozen divs causes the items to ‘flutter’, then I want the items placed at the end. I have tried various permutations of addItems, insert, appended, and not using to isotope(“reLayout”) to no avail.

How do I add items containing images with ajax with out having them overlapping, or fluttering?

Regards,
Nick

Answer 1

I don’t know if this helps any, but here’s an extraction of what I did:

var tmp = $();

// adding a jQuery-wrapped element to the tmp object
tmp = tmp.add( $( buildTemplate() ) );

$('#container').append(tmp);

tmp.imagesLoaded(function() {
    $('#container').isotope('appended', tmp);
});

The key for me was waiting for the images to load, otherwise reLayout didn’t do anything.