Super Tiny Pinterest Dynamic Grid Layout Plugin with jQuery - Pubu

Super Tiny Pinterest Dynamic Grid Layout Plugin with jQuery - Pubu
File Size: 904KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Pubu is a super simple and fast jQuery plugin for quickly creating a popular dynamic grid layout led by Pinterest.com.

Features:

  • Lightweight and easy to use
  • Responsive design
  • Image laze load
  • Infinite scroll
  • Supports all major browsers (IE7+, chrome, firefox, etc)

You might also like:

How to use it:

1. Include jQuery library and Pubu plugin in the header

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/pubu.js"></script>

2. Markup html structure

<div id="pubu">

<div class="box">
<div class="pic"> <img src="images/1.jpg"> </div>
</div>

<div class="box">
<div class="pic"> <img src="images/2.jpg"> </div>
</div>

<div class="box">
<div class="pic"> <img src="images/3.jpg"> </div>
</div>

...

</div>
</div>

3. The CSS

#pubu {
margin: 0 auto;
position: relative;
}
#pubu .box {
width: 280px;
height: auto;
padding: 10px;
float: left;
}
#pubu .box .pic {
width: 280px;
height: auto;
box-shadow: 1px 1px 4px #ddd, -1px -1px 4px #ddd;
border-radius: 4px;
}
#pubu .box .pic img {
display: block;
width: 250px;
margin: 0 auto;
padding: 15px 0;
cursor: pointer;
}

This awesome jQuery plugin is developed by unknown. For more Advanced Usages, please check the demo page or visit the official website.