Create Pinterest Layout Easily and Use it Creatively

Written by Kevin Liew on 18 Sep 2012
48,842 Views • Web Development

Pinterest layout has become one of the trends in web layout. There are a few pinterest clones available online,  you even can buy the whole website package with similar features as well.

This famous layout is often called as dynamic fluid layout in web industry. This kind of layout consists of information blocks that rearrange itself, and responsive to the browser dimension. With some creativity, designers can easily change this layout into something more catchy and look great to present large amount of information and images.

In this post, we have found JavaScript plugins that help you to do it quickly and easily. Also, a list of latest designs that utilize the dynamic fluid layout creatively.

Javascript Plugins

You can make this layout from scratch using javascript, but why reinvent the wheel when you can easily get the free javascript plugin to do it? Few months ago, it doesn't have a lot of choices, but this time, we have found 7 javascript plugins that able to help you achieve that kind of layout.

  • Freetile: Freetile is a plugin for jQuery that enables the organization of webpage content in an efficient, dynamic and responsive layout. It can be applied to a container element and it will attempt to arrange it's children in a layout that makes optimal use of screen space, by "packing" them in a tight arrangement.
  • Wookmark: A dynamic column grid from Wookmark. Based on their own website, but they are generous enough to make it a javascript plugin and share it with everyone. :)
  • Masonry: Masonry is a dynamic grid layout plugin for jQuery. Think of it as the flip-side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically, positioning each element in the next open spot in the grid.
  • Flex: A fluid asymmetrical animated grid plugin for jQuery. Flex is an idea inspired by the old flash homepage on Adidas.com. Searching google for anything that resembled that effect, lead me to a few plugins that were similar, but not the same.
  • BlocksIt.js: BlocksIt.js is a jQuery plugin for creating dynamic grid layout. It manages to convert HTML elements into ‘blocks‘ and position them in well-arranged grid layout like Pinterest.
  • Isotope: An exquisite jQuery plugin for magical layouts. It comes with many exclusive features that are not available in other plugins such as sorting, filtering and different layout modes. However, it's free for personal use, if you used it for commercial website, you need to buy license.

Some inspirations

Despite of the ordinary Pinterest layout. If you using dynamic fluid layout creatively, you can achieve amazing and eye-catching design as well. The following is a list of collection that I have found recently which is using this kind of layout:

Swinton

Swinton

Rosie Lees

Rosie Lees

Gareth Wrice

Gareth Wrice

Lotta Nieminen

Lotta Nieminen

Bend Kammerer

Bend Kammerer

ZE Studio

ZE Studio

Pixillion

Pixillion

Skyskraper

Skyskraper

The Mar2

The Mar2

Aquest

Aquest

Use these creative Pinterest layouts for your custom brochure printing.

Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.