Get Started

YUI Masonry is easy to use. You can copy/paste following sample code to create your first fluid-style page by YUI Masonry.

HTML Markup

Prepared HTML Markup like:

		  
<div id="container">
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    ...
</div>
		  
		  

CSS Style

You can control sizing of items here. Note that items should be floated.

		  
.item {
  width: 220px;
  margin: 10px;
  float: left;
}
		  
		  

JavaScript

Put the YUI seed and Masonry files on your page. If not familiar with JavaScript, highly recommended put it before </head> HTML tag.

		  
// Include YUI seed on your page.
<script src="http://yui.yahooapis.com/3.6.0/build/yui/yui-min.js"></script>
// Include YUI Masonry
<script src="../assets/js/yui.masonry.js"></script>
		  
		  

The YUI seed file is an ultra-small bit of JavaScript that enables you to load any YUI component on your page.

Using YUI Masonry!

Remenber that id and item class name are defined by HTML markup.

		  
<script>
    YUI().use('masonry', function (Y) {
        var masonry = new Y.Masonry({
            node: '#container',
            itemSelector: '.item'
        });
    });
</script>
		  
		  

Complete Example Source

It helps you to understand whole picture of this sample.

		  
<!DOCTYPE html>
<html>
  <head>
    <title>YUI Masonry sample</title>
	<style>
      .item {
        width: 220px;
        margin: 10px;
        float: left;
      }
	</style>
    // Include YUI seed on your page.
    <script src="http://yui.yahooapis.com/3.6.0/build/yui/yui-min.js"></script>
    // Include YUI Masonry
    <script src="../assets/js/yui.masonry.js"></script>
  </head>
  <body>
    <div id="container">
      <div class="item">...</div>
      <div class="item">...</div>
      <div class="item">...</div>
      ...
    </div>
    <script>
      YUI().use('masonry', function (Y) {
        var masonry = new Y.Masonry({
            node: '#container',
            itemSelector: '.item'
          });
      });
    </script>	
  </body>
</html>
		  
		  

Yahoo! CDN Service (Recommend)

YUI Masonry had contributed to YUI Gallery. It means that you can leverage Yahoo! CDN to host the masonry files.

		  
// Include YUI seed on your page.
<script src="http://yui.yahooapis.com/3.6.0/build/yui/yui-min.js"></script>
		  
		  
		  
YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2012.08.01-13-16'
}).use('gallery-masonry', function (Y) {
    var masonry = new Y.Masonry({
        node: '#container',
        itemSelector: '.item'
    });
});