UDX - Isotope

Includes catFactory.

by andypotanin

HTML

<script src="http://cdn.udx.io/udx.requires.js"></script>
<div class="isotope-items">
    <img src="http://placekitten.com/g/100/100"/>
    <img src="http://placekitten.com/g/100/130"/>
    <img src="http://placekitten.com/g/100/110"/>    
    <img src="http://placekitten.com/g/100/140"/>    
    <img src="http://placekitten.com/g/100/120"/>    
    <img src="http://placekitten.com/g/100/160"/>        
</div>

CSS

.isotope-items {
    width: 210px;
}

JavaScript

console.clear();

require( ['isotope', 'udx.utility.imagesloaded'], function IsotopeTest() {
    
    var iLoaded     = require( 'udx.utility.imagesloaded' );
    var isotope     = require( 'isotope' );
    var target      = document.querySelector( '.isotope-items' );
    
    iLoaded( document.body, function() {
        console.log( 'images loaded' );
    });

    target.isotope  = new isotope( target );
    
    window.setTimeout( function() { 
        console.log( 'more cats', catFactory() );
        jQuery( target ).append( catFactory() ); 
    }, 2000 );
    
    // window.setInterval( function() { jQuery( target ).append( catFactory ); }, 5000 );

    // console.dir( isotope );
    // console.dir( target.isotope.appended( ) );
    // console.dir( typeof iso );
    
});


function catFactory() {
    var newCat = jQuery( '<img src="http://placekitten.com/g/100/' + '160' + '"/>' )
    return newCat.get(0);
}