Dynamic web page layout

Hi folks,
Today I will be sharing a very widely used plug-in, called masonry. The basic idea is to create a web page, containing various HTML blocks spread throughout. But the catch is, the boxes are supposed to adjust themselves based on their content size. The layout of the web page, or rather the blocks will be dynamic as far as their positioning is concerned.

Following is an example of the same:

Download: dynamic_web_layout.zip

Source code:

Using this plug-in is probably the best part. It is that simple! Here is the HTML of the above:

<div class="container">
              <div class="box">
                <h3>Block header</h3>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
              </div>
</div>

The 'box' class is the container for each block and 'container', as it self implies, is the container of all the blocks. This 'box' container is a very basic one. You can go on and add images, swf etc. and take it to a whole new level of craziness. Just keep adding 'box' containers one after another for more blocks.

The magic script to make boxes auto align itself is:

 jQuery(document).ready(function(){
              $('.container').masonry({
                  itemSelector: '.box',
                });
          })

Put this in, and you are done. It is that easy. All you need is jQuery and the jquery.masonry.min.js file.


Download example: dynamic_web_layout.zip

Hope this helps!