JSFiddle - React, Tailwind, and code Playground

by Laurie

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;
  margin:8px;
}

#grid div img {
	border:1px transparent solid;
}


#grid div:hover img {
	opacity: 1;
	-webkit-animation: flash 2s;
	animation: flash 2s;
  border:1px #cccccc solid;
}
@-webkit-keyframes flash {
	0% {
		opacity: .4;
	}
	100% {
		opacity: 1;
	}
}
@keyframes flash {
	0% {
		opacity: .4;
	}
	100% {
		opacity: 1;
	}
}

JavaScript

$.getJSON();
$.ajax({
    url: 'https://openapi.etsy.com/v2/shops/lemonbranch/listings/active.js?includes=MainImage&limit=100',
    data: {api_key: '9njigunpqge5htjynd9uu52f'},
    dataType: 'jsonp',
    success: function(data){
        console.log(data,'success');
        $.each(data, function(i) { fisherYates(this) });
        for(x in data.results){
        	//console.log(data.results[x].title);
            $('ul')
                .append("<li><div><a href='" + data.results[x].url + "'><img src='" + data.results[x].MainImage.url_170x135 + "'/></a></div></li>");
        }
    },
    error: function(data){
        console.log(data,'error');        
    }
});


function fisherYates(myArray) {
    var i = myArray.length, j, tempi, tempj;
    if (i === 0) return false;
    while (--i) {
        j = Math.floor(Math.random() * (i + 1));
        tempi = myArray[i];
        tempj = myArray[j];
        myArray[i] = tempj;
        myArray[j] = tempi;
    }
}