Skip to content

Instantly share code, notes, and snippets.

@begriffs
Created July 10, 2013 03:29
Show Gist options
  • Select an option

  • Save begriffs/5963274 to your computer and use it in GitHub Desktop.

Select an option

Save begriffs/5963274 to your computer and use it in GitHub Desktop.
Using masonry
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/masonry/3.0.0/masonry.pkgd.js"></script>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function () {
var container = document.querySelector('body');
var msnry = new Masonry( container, {
itemSelector: 'div'
});
});
</script>
<style type="text/css">
body {
text-align: center;
}
.twothirds {
height: 200px;
}
.onethirds {
height: 100px;
}
div {
display: inline-block;
outline: 1px solid #333;
margin: 10px;
}
</style>
</head>
<body>
<div class="twothirds">
I am twoer.
</div>
<div class="onethirds">
I am a div.
</div>
<div class="onethirds">
I am a div.
</div>
<div class="twothirds">
I am a div.
</div>
<div class="twothirds">
I am twoer.
</div>
<div class="onethirds">
I am a div.
</div>
<div class="onethirds">
I am a div.
</div>
<div class="twothirds">
I am a div.
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment