Recreate Pinterests Block Style Layout Using Jquery & CSS3
Written by Aaron Lumsden on 04 Sep 2012
The Pinterest layout is one of the most popular layouts on the web right now. In this tutorial I’m going to show you how you can recreate the layout in a relatively short amount of time.
What We’ll be Creating
About Pinterest
Unless you’ve been hiding under a rock recently you’ll have realised how much everyone is going on about Pinterest. It’s basically a useful service that lets you grab images or videos from across the web and add them to a personalised mood board. Pinterest describes itself as:
“A content sharing service that allows members to pin images, videos and other objects to thier pin boards”
The great thing about Pinterest is it’s layout which has seen a number of websites try to emulate. These websites include Dudepins and Pinspire. What makes this layout ideal for the modern web is its ability to adjust and layout the number of block elements according to the device that it is being viewed on. If you take a look at the demo and resize the screen you’ll see how the pins adjust accordingly.
The Pinterest Layout script
The actual script is quite basic and doesn’t involve too much code. It works the opposite to how CSS floats work. Floats traditionally work by laying things out horizontally but with this method it arranges elements vertically, positioning each element in the next available spot on the grid.
Fortunately for us there’s a whole host of plugins that are now available to re create the effect and allow us to have our own layout similar to Pinterest in a relatively short amount of time.
For this tutorial I’m going to be using masonry which was developed by David DeSandro who’s a webdesigner at Twitter.
Step 1 – The HTML
In order to follow along to this tutorial it might be a good idea to download the source files and follow along.
To start with we need to create a container that will hold all of our ‘pins’. We will give this an ID of ‘container’
<div id="container"> </div><!--End Container-->
We then need to create a pin. The pin consists of the main image followed by a description of what the main pin image is. We then have a div called “convo” which will hold the comments. In this instance though I’ve chosen to add an author link.
<div class="pin">
<img src="images/1.jpg" alt="">
<p class="description">Game Icon</p>
<div class="convo">
<img src="images/avatar.jpg">
<p>
<a href="">Aaron Lumsden</a> via <a href="">Aaronlumsden.com</a>
</p>
</div>
</div>
Once we’ve created the ‘.pin’ div which should be inside the ‘#container’. We then repeat these pins and place different length images in. Masonry does actually let you create different width pins as well but that is out of the scope of this tutorial.
Step 2 – The CSS
the CSS is quite simple. We just need to add a few styles to the HTML
html{
background-color:#F7F5F5;
font-family: 'helvetica neue', arial, sans-serif;
color: #211922;
}
We then add the CSS for the actual pin. We set the width of the pin to 192px but we don’t add a height as we need this to be flexible. We then give it a bit of padding and add a nice box shadow just to lift it from the page.
.pin{
width: 192px;
padding: 15px 15px 0;
font-size: 11px;
background-color: white;
box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4);
-moz-box-shadow: 0 1px 2px rgba(34,25,25,0.4);
-webkit-box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4);
margin-right:20px;
margin-bottom:20px;
}
The rest of the CSS is just styling the description and convo text as well as adding a margin to the right of the avatar image.
.description{
padding:10px;
}
.convo{
margin: 0 -15px;
padding: 10px 15px;
background-color: #F2F0F0;
color: #8C7E7E;
}
.convo img {
width: 30px;
height: 30px;
float:left;
margin-right:5px;
}
.convo p a{
color: #8C7E7E;
font-weight:bold;
}
Step 3 – The Jquery
Firstly make sure you’ve included jquery in the footer of your html document (just before the closing body tag). Also include your own javascript file and the masonry plugin. It should look something like this:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="js/js.js"></script> <script type="text/javascript" src="js/jquery.masonry.min.js"></script> </body>
In the js.js file add this simple bit of code. Here we are telling masonry that ‘#container’ is our containing div. We also need to tell it which divs we are using for our pins. In this case it is ‘.pin’. The ‘isFitWidth: true’ allows for masonry to centre our container when the pins don’t fit to the full width of the screen.
jQuery(document).ready(function($) {
$('#container').masonry({
itemSelector: '.pin',
isFitWidth: true
});
});
Adding movement to our Pinterest Board
Whenever the window is resized it’s nice to add a transition effect, we can doing this using CSS3 transitions. We simply add this to the CSS file
.masonry,
.masonry .masonry-brick {
-webkit-transition-duration: 0.7s;
-moz-transition-duration: 0.7s;
-ms-transition-duration: 0.7s;
-o-transition-duration: 0.7s;
transition-duration: 0.7s;
}
.masonry {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
-ms-transition-property: height, width;
-o-transition-property: height, width;
transition-property: height, width;
}
.masonry .masonry-brick {
-webkit-transition-property: left, right, top;
-moz-transition-property: left, right, top;
-ms-transition-property: left, right, top;
-o-transition-property: left, right, top;
transition-property: left, right, top;
}
If you’ve seen a website that uses this effect well or you’ve used it in your own site then please send me a link in the comments below as I’d be happy to see it. What do you think of the effect? Are you a fan or do you think it’s overused. Let me know below.
Recreate Path’s IOS Style Navigation Using HTML, CSS3 & Jquery
Create a Parallax Scrolling Website Using Stellar.js
Create a Customized HTML5 Audio Player
Hi i have a correction : just add afin js this code :
$(function(){
var $container = $(‘#container’);
$container.imagesLoaded( function(){
$container.masonry({
itemSelector : ‘.box’
});
});
});
Thank you! Finally a simple tutorial on how to do this style gallery. This explains everything so easily and best of all it’s working. I’ll be publishing it soon. Great job on this!
Good! Glad it came in useful Christa!
Nice tutorial. I can see the elements reflow when I narrow the browser window. It seems that on mobile browser (I am using iPhone 5 and Safari) it still shows a desktop width. How to get Masonry to work properly on mobile such that it re-arranges the pins to a single column?
Thanks