kerns · February 21, 2013 13:15
diff --git a/2col_masonry_layout.html b/2col_masonry_layout.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="utf-8">
  <title>2-column “responsive” masonry layout without JS plugins</title>
  <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
  <style>
    body {
      text-align: center;
    }
    section {
      display: block;
      width: 70%;
      margin: 5% auto;
    }
    article {
      display: block;
      width: 48%;
      margin: 0 0 5%;
      background: #999;
      height: 300px;
      float: left;
      clear: left;
    }
    article.right {
      float: right;
      clear: right;
    }
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script>
    $(function() {
      // Thanks to Mark Avery
      // http://stackoverflow.com/questions/8191015/how-do-i-lay-out-my-content-divs-in-a-similar-manner-to-facebook-timeline
      var adjustArticleHeights = (function () {

        var leftColumnHeight = 0,
          rightColumnHeight = 0,
          $articles = $('section article');

        for (var i = 0; i < $articles.length; i++) {
          // This just adds random heights to articles
          $articles.eq(i).height(Math.floor(Math.random() * 300) + 10);

          if (leftColumnHeight > rightColumnHeight) {
            rightColumnHeight += $articles.eq(i).addClass('right').outerHeight(true);
          } else {
            leftColumnHeight += $articles.eq(i).outerHeight(true);
          }
        }

        return $articles;
      })();
    });
  </script>
 </head>
 <body>
  <h1>2-column “responsive” masonry layout without JS plugins</h1>
  <p>Easily turn simple 1-column layout into a 2-column “responsive” masonry layout without JS plugins. Works even in IE6! <a href="https://gist.github.com/viljamis/5004354">View the source code</a></p>
  <section>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
  </section>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>2-column “responsive” masonry layout without JS plugins</title>
	<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
	<style>
	body {
	text-align: center;
	}
	section {
	display: block;
	width: 70%;
	margin: 5% auto;
	}
	article {
	display: block;
	width: 48%;
	margin: 0 0 5%;
	background: #999;
	height: 300px;
	float: left;
	clear: left;
	}
	article.right {
	float: right;
	clear: right;
	}
	</style>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<script>
	$(function() {
	// Thanks to Mark Avery
	// http://stackoverflow.com/questions/8191015/how-do-i-lay-out-my-content-divs-in-a-similar-manner-to-facebook-timeline
	var adjustArticleHeights = (function () {

	var leftColumnHeight = 0,
	rightColumnHeight = 0,
	$articles = $('section article');

	for (var i = 0; i < $articles.length; i++) {
	// This just adds random heights to articles
	$articles.eq(i).height(Math.floor(Math.random() * 300) + 10);

	if (leftColumnHeight > rightColumnHeight) {
	rightColumnHeight += $articles.eq(i).addClass('right').outerHeight(true);
	} else {
	leftColumnHeight += $articles.eq(i).outerHeight(true);
	}
	}

	return $articles;
	})();
	});
	</script>
	</head>
	<body>
	<h1>2-column “responsive” masonry layout without JS plugins</h1>
	<p>Easily turn simple 1-column layout into a 2-column “responsive” masonry layout without JS plugins. Works even in IE6! <a href="https://gist.github.com/viljamis/5004354">View the source code</a></p>
	<section>
	<article></article>
	<article></article>
	<article></article>
	<article></article>
	<article></article>
	<article></article>
	<article></article>
	<article></article>
	<article></article>
	<article></article>
	<article></article>
	<article></article>
	<article></article>
	<article></article>
	<article></article>
	<article></article>
	<article></article>
	<article></article>
	<article></article>
	<article></article>
	<article></article>
	<article></article>
	<article></article>
	</section>
	</body>
	</html>