Create Pinterest Layout Easily and Use it Creatively

Create Pinterest Layout Easily and Use it Creatively


Create Pinterest Layout Easily and Use it Creatively

Introduction

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.

  • FreetileFreetile 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.
  • WookmarkA 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. :)
  • VgridJavscript plugin from a japanese website. Honestly, I don't understand japanese, but the best thing is, javascript is always the same no matter where you come from. :) You can hit their Github repo.
  • MasonryMasonry 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.
  • FlexA 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.jsBlocksIt.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.
  • IsotopeAn 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:

Use these creative Pinterest layouts for your custom brochure printing.

Author: Kevin Liew

Kevin Liew is a web designer and developer and keen on contributing to the web development industry. He loves frontend development and absolutely amazed by jQuery. Feel free to say hi to me, or follow @quenesswebblog on twitter.

Share the love

Leave a Comment

Please keep in mind that comments are moderated and rel="nofollow" is in use. You can use [code][/code] if you want to write codes. Don't spam us :) Thanks!

Advertisement