Floater - a jQuery plugin

How to use?

  • duration Duration of the animation
  • minimumMargin Numerical value of minimum margin between floating elements.
  • maximumMargin Numerical value of maximum margin between floating elements.
  • easing Animation easing, ex. 'linear'.
  • boxClass Floating elements selector class.
  • fluidHeight Give true for fluid container height.
  • Callback Put here you're callback function after reposition of the elements.

Sample code

JavaScript

$("#container").floater({
    duration : 500,
    easing : 'easeOutBack',
    boxClass : '.block',
    minimumMargin : 10,
    maximumMargin : 30,
    callback : function() {
        alert( 'Position changed!' );
    }

});

HTML

<div id="container">
    <div class=".block">
    <div class=".block">
    <div class=".block">
    <div class=".block">
    <div class=".block">
<div />

CSS

#container {
    width: 600px;
    height: 400px;
    background-color: #ccc;
}

.block {
    width: 50px;
    height: 50px;
    background-color: #555
}

What it looks like? Toggle dimensions

1
2
3
4
5
6
7
8
9
10
11
12
See how it works in real life

Download

From GIT Hub