Pinterest surely has a really good layout when it comes to floating images posts without any gaps. If you do a traditional float using the CSS then surely you don’t get a condensed look like Pinterest. Today! I thought to post a tutorial for those developers who want to make posts appear in a Pinterest way (Coding layout of Pinterest like posts with thumbnails). For this purpose I am going to use some jQuery and masonry.js using which we shall be able to have an identical layout like Pinterest.

Floating Divisions Without using Masonry and jQuery:

Below you can see the gaps appearing when we float the divisions without using the masonry javascript. This is because of the greater height of one division.

Floating Condensed divisions with perfect height using Masonry and jQuery:

Tutorial – Making Posts float Left just Like pinterest without any Gaps using Masonry and jQuery:

You are at WordPress? So here is the good news, when you are at the updated versions of WordPress like 3.5 and 3.5.1, the WordPress development team has automatically added the both scripts for you to make the posts work like Pinterest style. Just you need to do the following steps:

Triggering/Including Masonry.js from Functions.php:

You need to include the masonry.js using the functions.php file of your WordPress theme. Since masonry is already added to you WordPress and you need to just call it. Thus copy and paste the following function in your WordPress functions:

function mason_script() {
    wp_enqueue_script( 'jquery-masonry' );
}
add_action( 'wp_enqueue_scripts', 'mason_script' );
register_nav_menu( 'primary', 'Header Menu' );

After you have added, just save the functions.php

Including jQuery in your WordPress header:

Now, you need to call jQuery in your WordPress if you haven’t already used the jQuery with it. However if you have called the jQuery already in your theme then you don’t need to call it again to avoid conflicts. Check this code if it’s already added or not? You know what to do in any case. (Note: Add it above wp_head)

<?php wp_enqueue_script("jquery"); ?>

Selecting the parent div for floats to be aligned left in Pinterest style using jQuery:

Now you are almost done. Here is the last step, you need to select the parent div of the floats which you need to align like the Pinterest i-e I am talking about those divisions which you need to float like the screenshots shown above. Suppose you have floated them at left using the class “talkofweb-floats” then the code for this class should be:

.talkofweb-floats {
   float: left;
   margin-left: 10px;
   width: 200px;
   padding: 10px; /* as desired */
}

Your posts format should be like this:

<div id="container"> <!-- this is your container id -->
<div class="talkofweb-floats">
<!-- post1 content -->
</div>
<div class="talkofweb-floats">
<!-- post2 content -->
</div>
<div class="talkofweb-floats">
<!-- post3 content -->
</div>
</div>

Thus! you need be sure about container id (We’ll select this id using jQuery for masonry in code below) and about the posts class i-e blocks to be floated left. So, Far I am supposing that you have got the look of first image which I posted in this post.

Now, You need to just use jQuery selectors to omit the vertical gaps in your posts blocks. Copy and paste this script in your index.php of the theme or there where you need such arrangement like pinterest.

<script type="text/javascript">
jQuery(document).ready(function($){
  $('#container').masonry({ singleMode: true });
});
</script>

My Final Look of Theme which I developed: