pinbox, build Boxes like Pinterest!

Features:

• It is easy to handle with and to use.
• It automatically handles the different height of the boxes and layouts them appropriately.
• its fast
• It also works with endless scrolling.

Simple Demo

Advanced Demonstration

German description

How to use this plugin:

Create a new pinboxes:

                        
 $(document).ready(function () {
     $('#categoryProductContainer').pinbox().hide(0).fadeIn(1000);
 });
                           
                        
                        

The html markup for the simple example:

                        
                           
  < d i v style="position:relative" id="categoryProductContainer">
            < d i v class="span2 prodcont new" >
                1
             < / d  i  v >
 < / d  i  v >
            ......

                            
                        
                        

Important in this html markup are the class "new" and the class"prodcont" this classes are the selector for the pinbox plugin

Avaiable Options:

                        
                          
var options = {
        newitemindicator : "new",
        subcontainer : ".prodcont" 
};
$('#categoryProductContainer').pinbox(options);
                            
                        
                        

option newitemindicator
the new item indicator is a class wich all the subcontainers must have. This class will removed after positioning the div box in the DOM.
When you append to the container via ajax new boxes, the plugin havent to look at all child nodes of the container.