Scatter Documentation

Scatter is a JavaScript library for randomly arranging HTML elements within a containing element.

The main use case is an image gallery, but the library purposefully does not restrict what it can be used for - it can provide a scattered polaroid photo effect as easily as using decorative images to provide a randomized background, or any other reasons for scattering items your imagination can come up with.

Restrictions on markup and styling are intentionally kept to a minimum - the elements must be top-level children of the container, and the container's position style needs to be relative, absolute, or fixed (not static).

Usage

A Scatter instance is created by loading the JavaScript library, then calling new Scatter(target), where target is the container of the elements you wish to scatter:

<div id="container">...</div>
<script src="scatter.js"></script>
<script>
	new Scatter('#container');
</script>

Scatter doesn't care where the src script tag is placed (e.g. in head, at end of body, or elsewhere), and likewise, the new Scatter call can be placed in the page, in a document ready function, in an event handler, or anywhere else that makes sense.

The instance can be assigned to a variable, allowing methods to be called - such as to first scatter and then select the first item:

<div id="container">...</div>
<script src="scatter.js"></script>
<script>
	var MyScatter = new Scatter('#container');
	MyScatter.select(0);
</script>

To change the default behaviour, use the second argument to pass in an object containing options, for example:

<div id="container">...</div>
<script src="scatter.js"></script>
<script>
	new Scatter('#container',{Mode:'pile'});
</script>

The demos section contains various working examples showing different ways Scatter can be used.