Cómo adjuntar imágenes con isótopo

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?

Saludos, Nick

preguntado el 04 de julio de 12 a las 00:07

My final solution was to send the dimensions of the image along with the url to the image. By setting the height of the image, isotope positioned the images appropriately, and with no need to call reLayout. -

1 Respuestas

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() ) );


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

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

Respondido 28 ago 12, 20:08

I'm assuming imagesLoaded comes from David DeSandro's jQuery plugin? - xr280xr

@Brad Azevedo can you post a sample - user3390927

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.