Etsy API Example

HTML

<script src="//tympanus.net/Development/GridLoadingEffects/js/masonry.pkgd.min.js"></script>
<script src="//tympanus.net/Development/GridLoadingEffects/js/imagesloaded.js"></script>
<script src="//tympanus.net/Development/GridLoadingEffects/js/classie.js"></script>
<script src="//tympanus.net/Development/GridLoadingEffects/js/AnimOnScroll.js"></script>
<ul class="grid effect-3" id="grid"></ul>

CSS

ul li {
  list-style-type:none;
  display:block;
  float:left;
  padding:6px;
}

JavaScript

$.getJSON();
$.ajax({
    url: 'https://openapi.etsy.com/v2/shops/maradasbags/listings/active.js?includes=MainImage,Price',
    data: {api_key: 'fujo9qcscyfbuvg46d7l02tx'},
    dataType: 'jsonp',
    success: function(data){
        console.log(data,'success');
        for(x in data.results){
        	//console.log(data.results[x].title);
            $('ul')
                .append("<li><a href='" + data.results[x].url + "'><img src='" + data.results[x].MainImage.url_170x135 + "'/></a>'" + data.results[x].title + "'</li>");
        }
    },
    error: function(data){
        console.log(data,'error');        
    }
});

new AnimOnScroll( document.getElementById( 'grid' ), {
				minDuration : 0.4,
				maxDuration : 0.7,
				viewportFactor : 0.2
			} );