Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
​
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="http://masonry.desandro.com/jquery.masonry.min.js"></script>
<style>
  .item {
    float: left; /* This is necessary */
    width: 200px;
    background-color: #CCC;
    margin: 5px;
    padding: 30px 5px;
  }
  .wide {
    width: 440px; /* This is to compensate for margin and padding (2*200px)+(2*5px)+(2*5px) */
    background-color: gray;
  }
  h1 {
    font-family: arial;
    font-size: 16px;
  }
</style>
  
</head>
<body>
  <h1>Masonry example - try resizing the window. Part of a <a href="/">webdev360 tutorial</a>.</h1>
<div id="container">
  <div class="item">Box 1</div>
  <div class="item wide">Box 2</div>
  <div class="item">Box 3</div>
  <div class="item">Box 4</div>
  <div class="item">Box 5</div>
  <div class="item">Box 6</div>
  <div class="item wide">Box 7</div>
  <div class="item">Box 8</div>
  <div class="item">Box 9</div>
</div>
  <script>
  $(function(){
  $('#container').masonry({
    // options
    itemSelector : '.item',
    columnWidth : 240,
    isAnimated: true
  });
});
  </script>
  </body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers