Question

I’m currently using isotope (with infinite scroll) to create a responsive web design.

(function() {
    var $container = $('#container');

    $container.isotope({
        itemSelector : '.element'
    });

    $container.infinitescroll({
        navSelector  : '#page_nav',    // selector for the paged navigation 
        nextSelector : '#page_nav a',  // selector for the NEXT link (to page 2)
        itemSelector : '.element',     // selector for all items you'll retrieve
        loading: {
            finishedMsg: 'No more pages to load.',
            img: 'http://i.imgur.com/qkKy8.gif'
        }
    },
    // call Isotope as a callback
    function( newElements ) {
        $container.isotope( 'appended', $( newElements ) ); 
    }
);
});

For a greater variation I tried to combine this with this script, but all the elements would overlap.

For reference this is the rotate function:

$("#gallery2 img").each(function() {
    var rNum = (Math.random() * 4) - 2;  
    $(this).css({
        '-webkit-transform': 'rotate(' + rNum + '2deg)',
        '-moz-transform': 'rotate(' + rNum + '2deg)'  
    });
});

How can I properly integrate this rotator to my existing jQuery?

Answer 1

The problem is that Isotope uses the transform property for its layout in modern browsers, which you’re resetting when setting the rotate.

Your best option is to disable the ‘transformsEnabled’ option within Isotope, forcing it to use top/left absolute positions instead, which will free up the transform property for your rotates.

http://isotope.metafizzy.co/docs/options.html#transformsenabled