JSFiddle - React, Tailwind, and code Playground

by Derek Anderson

HTML

<script src="//cdn.jsdelivr.net/isotope/1.5.25/jquery.isotope.min.js"></script>
<script src="//cdn.jsdelivr.net/underscorejs/1.5.2/underscore-min.js"></script>
<div class="container"></div>

CSS

body {
	font-family: Arial;
	font-size: 14px;
}

#container {
  border: 1px solid #666;
  padding: 5px;
  margin-bottom: 20px;
}

.element {
  width: 110px;
  height: 110px;
  margin: 5px;
  float: left;
  overflow: hidden;
  position: relative;
  background: #fff;
  color: #222;
  text-align: center;
  box-shadow: 2px 2px 3px rgba(0,0,0,.75);
}

.element * {
  margin: 0;
}

.element .symbol {
  left: 0.2em;
  top: 0.4em;
  font-size: 3.8em;
  line-height: 1.0em;
  color: #FFF;
}

.element img {
	position: relative;
	width: 100%;
}

.element.width2 {
	width: 220px;
	height: 220px;
}

.element.height2 {
	width: 300px;
	height: 300px;
}

.element.large,
.variable-sizes .element.large,
.variable-sizes .element.large.width2.height2 {
	width: 300px;
	height: 300px;
}

.clickable .element:hover {
  cursor: pointer;
}

.clickable .element:hover h3 {
  text-shadow:
    0 0 10px white,
    0 0 10px white;
}

.clickable .element:hover h2 {
  color: white;
}

/**** Isotope styles ****/
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

/* Start: Recommended Isotope styles */

/**** Isotope Filtering ****/
.front {
	z-index: 2;
}

.isotope-hidden.isotope-item {
	pointer-events: none;
	z-index: 1;
}

/**** Isotope CSS3 transitions ****/
.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
	 -moz-transition-duration: 0.8s;
	  -ms-transition-duration: 0.8s;
	   -o-transition-duration: 0.8s;
		  transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
	 -moz-transition-property: height, width;
	  -ms-transition-property: height, width;
	   -o-transition-property: height, width;
		  transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
	 -moz-transition-property:    -moz-transform, opacity;
	  -ms-transition-property:     -ms-transform, opacity;
	   -o-transition-property:      -o-transform,...

JavaScript

var $container = $('.container');

var isDefined = function(obj){
	return typeof(obj) !== 'undefined' && obj !== null ? obj : ''
}

var Photos = function(name, sn, pic, type, photos){
	this.name = isDefined(name)
	this.screenName = isDefined(sn)
	this.profilePic = isDefined(pic)
	this.photos = isDefined(photos)
	this.type = isDefined(type)
}

var People = new function(){
	this.get = function(){
		photoCollection = []

		$.getJSON("http://query.yahooapis.com/v1/public/yql?q=SELECT%20*%20FROM%20json%20WHERE%20url%3D'http%3A%2F%2Frtodd.net%2Finterfaces%2Fdata%2Finstagram%2Finstagram.json'&format=json&diagnostics=true&callback=", function(_data){
            var data = _data.query.results.json;
			for(var key in data) {
				var photos = new Photos(key, data[key].sn, data[key].profile_pic, data[key].type, data[key].photos)
				photoCollection.push(photos)
			}

			console.log(photoCollection)
			People.renderTemplate(photoCollection)
		})
	}

	this.renderTemplate = function(pc){
		var template = _.template(template_raw, {
			data: pc
		})
		$('.container').html(template)

		People.setUpIsotope()
	}

	this.setUpIsotope = function(){
		// $container.find('.element').each(function(d, i){
		// 	var $this = $(this),
		// 		number = parseInt(Math.floor((Math.random()*10)+1));

		// 	console.log(number)
		// 	// $(this).css('border', '1px solid green')	
		// 	if (number % 7 % 2 === 1){
		// 		$this.addClass('width2');
		// 	}
		// 	if (number % 3 === 0){
		// 		$this.addClass('height2');
		// 	}
		// });

		$container.delegate('.element', 'click', function(){
			if(!$(this).hasClass('enlarged')){
				$(this).animate({
					width: 350,
					height: 350
				}, 300, function(){
					$container.isotope('reLayout');
					$(this).addClass('enlarged');
				})
			} else {
				$(this).animate({
					width: 110,
					height: 110
				}, 300,...