tonyciou · October 13, 2017 09:53
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
  <title>Cute Cats</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
  <script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
  <style>

  body {
    margin: 0;
    padding: 0;
    margin-top: 10px;
  }

  .container {
    max-width: 960px;
    margin: 0 auto;
    overflow: hidden;
  }

  @media screen and (min-width: 1280px) {
    .container {
      max-width: 1200px;
    }
  }

  .cat-box {
    padding: 20px 20px 0 20px;
    border: 2px solid #fff;
    margin-bottom: 30px;
    max-width: 100%;
  }
 div.cat-container > div:first-child img {
    margin-bottom: 0;
  }

  @media screen and (max-width: 767px) {
    .cat-box {
      margin-bottom: 15px;
      min-height: auto;
    }
  }

  /* Grid */
  .row {
    margin-right: -20px;
  }

  .col {
    width: 100%;
    float: left;
    padding-right: 20px;
    box-sizing: border-box;
  }

  .col-xs-11 {width: 91.662%}
  .col-xs-10 {width: 83.332%;}
  .col-xs-9 {width: 75%;}
  .col-xs-8 {width: 66.662%;}
  .col-xs-7 {width: 58.331%}
  .col-xs-6 {width: 50%;}
  .col-xs-5 {width: 41.662%}
  .col-xs-4 {width: 33.332%;}
  .col-xs-3 {width: 25%;}
  .col-xs-2 {width: 16.662%;}
  .col-xs-1 {width: 8.332%;}

  @media screen and (min-width: 768px) {
    
    .row {
      margin-right: -40px;
    }
    
    .col {
      padding-right: 40px;
    }
      
    .col-sm-11 {width: 91.662%}
    .col-sm-10 {width: 83.332%;}
    .col-sm-9 {width: 75%;}
    .col-sm-8 {width: 66.662%;}
    .col-sm-7 {width: 58.331%}
    .col-sm-6 {width: 50%;}
    .col-sm-5 {width: 41.662%}
    .col-sm-4 {width: 33.332%;}
    .col-sm-3 {width: 25%;}
    .col-sm-2 {width: 16.662%;}
    .col-sm-1 {width: 8.332%;}
    
  }

  @media screen and (min-width: 1024px) {
    
    .col-md-11 {width: 91.662%}
    .col-md-10 {width: 83.332%;}
    .col-md-9 {width: 75%;}
    .col-md-8 {width: 66.662%;}
    .col-md-7 {width: 58.331%}
    .col-md-6 {width: 50%;}
    .col-md-5 {width: 41.662%}
    .col-md-4 {width: 33.332%;}
    .col-md-3 {width: 25%;}
    .col-md-2 {width: 16.662%;}
    .col-md-1 {width: 8.332%;}
    
  }

  @media screen and (min-width: 1280px) {
    
    .col-lg-11 {width: 91.662%}
    .col-lg-10 {width: 83.332%;}
    .col-lg-9 {width: 75%;}
    .col-lg-8 {width: 66.662%;}
    .col-lg-7 {width: 58.331%}
    .col-lg-6 {width: 50%;}
    .col-lg-5 {width: 41.662%}
    .col-lg-4 {width: 33.332%;}
    .col-lg-3 {width: 25%;}
    .col-lg-2 {width: 16.662%;}
    .col-lg-1 {width: 8.332%;}
    
  }

  .row:before,
  .row:after {
    content: "";
    display: table;
  }

  .row:after {
    clear: both;
  }

  .row {
    zoom: 1;
  }
  </style>
 </head>
 <body>
 <div class="container">
  <div class="row">
    <div class="col col-md-8">
      <div class="cat-container"></div>
    </div>
  </div>
 </div>
 </body>

 <script type="text/x-jquery-tmpl" id="cats">
  <div class="col col-sm-6 col-lg-3">
      <img class="cat-box" src="http://24.media.tumblr.com/bec5933eea5043acf6a37bb1394384ab/tumblr_mied4omnAR1s5prmbo1_400.gif"
    alt="${title}">
  </div>
 </script>

 <script type="text/javascript">

  var items = [
    { title: 'Cat 1', image: 'http://placekitten.com/311/313' },
    { title: 'Cat 2', image: 'http://placekitten.com/302/302' },
    { title: 'Cat 3', image: 'http://placekitten.com/303/303' },
    { title: 'Cat 4', image: 'http://placekitten.com/304/304' },
    { title: 'Cat 5', image: 'http://placekitten.com/305/305' },
    { title: 'Cat 6', image: 'http://placekitten.com/306/306' },
    { title: 'Cat 7', image: 'http://placekitten.com/307/307' },
    { title: 'Cat 8', image: 'http://placekitten.com/308/308' },
    { title: 'Cat 9', image: 'http://placekitten.com/310/310' }
  ];

  $('#cats').tmpl(items).each(function (i ,e){
    var $this = $(this);
    var imageLink = items[i].image;
    var image = new Image();

    image.onload = function () {
      $this.children('img').attr('src', image.src);
    }
    image.onerror = function () {
      $this.children('img').attr('src', 'https://oncheckin.com/assets/blogassets/blog-d888cc31-b202-4676-bdbe-e01432534be7.png');
    }
    image.src = imageLink;
    $('.cat-container').append(this);
  });

 </script>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Cute Cats</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
	<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
	<style>

	body {
	margin: 0;
	padding: 0;
	margin-top: 10px;
	}

	.container {
	max-width: 960px;
	margin: 0 auto;
	overflow: hidden;
	}

	@media screen and (min-width: 1280px) {
	.container {
	max-width: 1200px;
	}
	}

	.cat-box {
	padding: 20px 20px 0 20px;
	border: 2px solid #fff;
	margin-bottom: 30px;
	max-width: 100%;
	}
	div.cat-container > div:first-child img {
	margin-bottom: 0;
	}

	@media screen and (max-width: 767px) {
	.cat-box {
	margin-bottom: 15px;
	min-height: auto;
	}
	}

	/* Grid */
	.row {
	margin-right: -20px;
	}

	.col {
	width: 100%;
	float: left;
	padding-right: 20px;
	box-sizing: border-box;
	}

	.col-xs-11 {width: 91.662%}
	.col-xs-10 {width: 83.332%;}
	.col-xs-9 {width: 75%;}
	.col-xs-8 {width: 66.662%;}
	.col-xs-7 {width: 58.331%}
	.col-xs-6 {width: 50%;}
	.col-xs-5 {width: 41.662%}
	.col-xs-4 {width: 33.332%;}
	.col-xs-3 {width: 25%;}
	.col-xs-2 {width: 16.662%;}
	.col-xs-1 {width: 8.332%;}

	@media screen and (min-width: 768px) {

	.row {
	margin-right: -40px;
	}

	.col {
	padding-right: 40px;
	}

	.col-sm-11 {width: 91.662%}
	.col-sm-10 {width: 83.332%;}
	.col-sm-9 {width: 75%;}
	.col-sm-8 {width: 66.662%;}
	.col-sm-7 {width: 58.331%}
	.col-sm-6 {width: 50%;}
	.col-sm-5 {width: 41.662%}
	.col-sm-4 {width: 33.332%;}
	.col-sm-3 {width: 25%;}
	.col-sm-2 {width: 16.662%;}
	.col-sm-1 {width: 8.332%;}

	}

	@media screen and (min-width: 1024px) {

	.col-md-11 {width: 91.662%}
	.col-md-10 {width: 83.332%;}
	.col-md-9 {width: 75%;}
	.col-md-8 {width: 66.662%;}
	.col-md-7 {width: 58.331%}
	.col-md-6 {width: 50%;}
	.col-md-5 {width: 41.662%}
	.col-md-4 {width: 33.332%;}
	.col-md-3 {width: 25%;}
	.col-md-2 {width: 16.662%;}
	.col-md-1 {width: 8.332%;}

	}

	@media screen and (min-width: 1280px) {

	.col-lg-11 {width: 91.662%}
	.col-lg-10 {width: 83.332%;}
	.col-lg-9 {width: 75%;}
	.col-lg-8 {width: 66.662%;}
	.col-lg-7 {width: 58.331%}
	.col-lg-6 {width: 50%;}
	.col-lg-5 {width: 41.662%}
	.col-lg-4 {width: 33.332%;}
	.col-lg-3 {width: 25%;}
	.col-lg-2 {width: 16.662%;}
	.col-lg-1 {width: 8.332%;}

	}

	.row:before,
	.row:after {
	content: "";
	display: table;
	}

	.row:after {
	clear: both;
	}

	.row {
	zoom: 1;
	}
	</style>
	</head>
	<body>
	<div class="container">
	<div class="row">
	<div class="col col-md-8">
	<div class="cat-container"></div>
	</div>
	</div>
	</div>
	</body>

	<script type="text/x-jquery-tmpl" id="cats">
	<div class="col col-sm-6 col-lg-3">
	<img class="cat-box" src="http://24.media.tumblr.com/bec5933eea5043acf6a37bb1394384ab/tumblr_mied4omnAR1s5prmbo1_400.gif"
	alt="${title}">
	</div>
	</script>

	<script type="text/javascript">

	var items = [
	{ title: 'Cat 1', image: 'http://placekitten.com/311/313' },
	{ title: 'Cat 2', image: 'http://placekitten.com/302/302' },
	{ title: 'Cat 3', image: 'http://placekitten.com/303/303' },
	{ title: 'Cat 4', image: 'http://placekitten.com/304/304' },
	{ title: 'Cat 5', image: 'http://placekitten.com/305/305' },
	{ title: 'Cat 6', image: 'http://placekitten.com/306/306' },
	{ title: 'Cat 7', image: 'http://placekitten.com/307/307' },
	{ title: 'Cat 8', image: 'http://placekitten.com/308/308' },
	{ title: 'Cat 9', image: 'http://placekitten.com/310/310' }
	];

	$('#cats').tmpl(items).each(function (i ,e){
	var $this = $(this);
	var imageLink = items[i].image;
	var image = new Image();

	image.onload = function () {
	$this.children('img').attr('src', image.src);
	}
	image.onerror = function () {
	$this.children('img').attr('src', 'https://oncheckin.com/assets/blogassets/blog-d888cc31-b202-4676-bdbe-e01432534be7.png');
	}
	image.src = imageLink;
	$('.cat-container').append(this);
	});

	</script>
	</html>