jQuery Plugin For Rearranging Boxes In Grid Layout - boxes2fullwidth

boxes2fullwidth is an easy to use jQuery dynamic layout plugin that automatically rearrange boxes in grid layout with transition animation as the windows resized. Ideal for responsive web layout design.

Basic Usage:

1. Include jQuery library and boxes2fullwidth on the page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.box2fullWidth.js"></script>

2. Markup Html Structure

<div id="content">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    ...
    ...
</div>

3. The CSS. The containet must have width 100%. All boxes must have all the usual width

#content {
width: 100%;
position: relative;
height: auto;
background: #99FF33
}
.box {
width: 200px;
background: #CCCCCC;
}

4. Call the plugin with options

<script language="javascript">
$('#content').box2fullWidth({
minwidth:400, // Min page width
who:'div', // Who should be repositioned within the container.
margin:5, // Margin between boxes
duration:350, // Duration of animation
boxdelay:15, // Delay between animation box
bottomMargin:20, // Margin from bottom (if 0 no set #content height)
positionComplete:function(){ console.log("end!")} // Animation end callback
});
</script>

---

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