Alternative Jquery Plugins to Creating Pinterest Layout Style

Did you know, pinterest is bring new concept of grid system, its display many images in best view, just like collection. Users can see images in simplicity, then see all image easily. Exploring image now become simple way. Before it, grid use to display image in same size. In pinterest, you can see different size of image, and it is the art.

And right now, many designer want to create a pinterest like style. Many wordpress theme created with pinterest style, blogspot template also, and of course HTML5 template. Pinterest style everywhere.

What technology behind the pinterest layout? can I use it to build own pinterest layout style? yes you can. We were found best library to build pinterest layout style.

Pinterest layout perfect for photography site, website with many image, product show off and many more. Your creativity will determine it. Lets see

Gridfy Jquery Plugin

Its jquery plugin to creating pinterest layout style.

gridfy

Features

  1. support image loaded event
  2. support window resize event
  3. support very long height item
  4. support dynamic item width
  5. support animation (CSS3 transition)

Its easy to coding, just like this

window.onload = function(){
      var options =
      {
           srcNode: 'img',             // grid items (class, node)
           margin: '20px',             // margin in pixel, default: 0px
           width: '250px',             // grid item width in pixel, default: 220px
           max_width: '',              // dynamic gird item width if specified, (pixel)
           resizable: true,            // re-layout if window resize
           transition: 'all 0.5s ease' // support transition for CSS3, default: all 0.5s ease
      }
      document.querySelector('.grid').gridify(options);
 }

Download

Grid-A-Licious Jquery Plugin

Its another jquery plugin to creating pinterest layout style. Its support responsive feature, so your page will best view on any device and any site. You can check out demo page, check responsive feature and many more.

Grid-A-Licious not only fill with image, you can fill grid with text. I think, its greate javascript UI builder.

grid

Demo

Mason.js Jquery Plugin

Its popular jquery plugin and most used by developer and designer to creating pinterest layout style. Its ‘revision’ version of mansory.js, where mansory.js build a grid is constructed there are bound to be holes, so Mason calculates where those holes are fills them in.

mason.js

Demo

BlocksIt.js – Dynamic Grid Layout jQuery Plugin

a jquery plugin to display HTML element like a grid dynamiclly.

blockslt.js

Demo

Woomark Jquery Plugin

Its amazing plugin to creating pinterest layout style. Woomark Jquery is very popular plugin and was reviewed by wide web design blog such as Speckyboy. Woomark detects the size of the window and automatically organizes the boxes into columns. Resize your browser to see the layout adjust.

woomark jquery plugin

Demo

Babylon Grid Jquery Plugin

Babylon Grid is lightweight jQuery + CSS plugin for creating responsive, dynamic & customizable pinterest like grid with diferent column width support, few display mods and AJAX support.

babylon grid jquery plugin

The codes are simple, just like this

<div id="babylongrid">
    <article>
        First article
    </article>
    <article>
        Second article
    </article>
    <article>
        Third article
    </article>
    <article>
        Fourth article
    </article>
    <article>
        Fifth article
    </article>
<script type="text/javascript">
    (function($) {
        $('#babylongrid').babylongrid();
    },(jQuery));
</script>

Demo

Mosaic Flow

Mosaic Flow is jquery plugin to build pinterest layout style. You can display image without border

mosaic flow

Demo

I hope you can choose one and finish your project in right way. Thanks for visiting my web design blog and reading jquery plugin to build pinterest layout style

 

5 comments

  1. I see you don’t use the potential of social websites like facebook on your site.
    You can get huge traffic from social sites on autopilot using one useful app, for more details
    search in google for:
    Alufi’s Social Automation

  2. For larger organizations and companies, net development groups can include tons
    of of individuals ( web builders ) and observe commonplace strategies like Agile methodologies
    while creating web sites.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.