Monday, August 13, 2012

Pinterest like Blog Design with Masonry jQuery Plugin

We all know, how popular Pinterest and its unique Dynamic Grid Layout is. It has been adopted by a number of websites after its launch with Pinterest. And now, here we have a very simple tutorial to adopt this design for your Blog using Masonry jQuery plugin, and give your Blog a completely modern look.


We have here a very basic, simple and beginner level explanation, to utilize the great Masonry jQuery Plugin to give your blog a Pinterest like Dynamic Grid layout. You can also download the complete Project from  Masonry jQuery's Official Website .


We have used our Blog Posts as the content in this script to explain the tutorial. You can edit the script as per your requirements.


  javascripts  

This Index file holds the code to redirect the page to the original URL.

<script src="jquery-1.7.1.min.js"></script>
<script src="jquery.masonry.min.js"<>/script>
<script>
$(function(){
$('#container').masonry({
itemSelector: '.box'
});
});
</script>
//For including images
<script>
$(function(){
var $container = $('#container');
$container.imagesLoaded( function(){
$container.masonry({
itemSelector : '.box'
});
});
});
</script>


  Index.php  

This Index file holds the code for the Blog design using Masonry jQuery and its styling. We can adjust the widths of the columns, by changing the class box col2 to box col3 or box col4 etc as per your requirements.

<body class="demos">
<div id="content">
<div id="container" class="clearfix">
//Content Starts
<div class="box col2">
<p>Content Image</p>
<p>Content Description</p>
</div>
//Content Ends, you can repeat such content elements
</div></div>
//Footer
<div id="footer">
<div>Content of Footer</div>
</div>
</body>





11 comments:

  1. Liked this article..Best pinterest clone available in the market.

    ReplyDelete
  2. thanks, we will soon update this tutorial to include even more functions.

    ReplyDelete
  3. This is a nice simple start to the popular pinterest script.

    There are many out there but I have yet to come across any sites that explain how to hook in infinity scrolling that calls a database to add more content on the scroll. Most reference another html page, not a dynamic php page. Those that do, do not work with masonry or isotope scripts.

    It would be great to cover this with your next infinity scroll addition to this script. Or at least I hope? :)

    ReplyDelete
  4. Pinterest like blog design with masonry. Useful information

    ReplyDelete
  5. I am having problems with the imagesLoaded function. In IE10 some of the images do not load. But they do show up when I take the reference to that function out. You can see example here:http://www.sierrausa.com/staging/ Please help.

    ReplyDelete
    Replies
    1. Everything worked fine on my side. IE7 gives this issue but not IE10. Still, i will check and keep you posted...

      Delete
  6. Thank you for your help. I have checked on two computers, both IE10 have missing images. Tried to clear my cache and the problem is still there.

    ReplyDelete
    Replies
    1. I found this post,
      (http://stackoverflow.com/questions/15387325/force-ie10-to-run-in-ie10-compatibility-view)
      , i hope it helps you out. There are some solutions mentioned here, do try them. Try using the meta tag, and the various Doctypes. Also try the IE10 compatibility view.

      Do tell us if anything works. :)

      Delete
  7. Thanks for your help, but compatibility mode didn't work. The problem is in the imagesLoaded function. When it is removed IE10 loads all the images and works fine. The only issue without this function is that FF and other browsers (but IE) collapse masonry layout on load. Is there any work around that?

    ReplyDelete
    Replies
    1. Can you please share the code of this imagesLoaded function so that i can take a look into it.

      Delete
  8. Thank you! I spent two hours looking for this.

    ReplyDelete