Sorcerer's Tower

Introducing Scatter JS Library

Scatter is a JavaScript library for randomly arranging HTML elements within a containing element. It is deliberately lightweight, easy to integrate, and without dependencies.

The initial script was written to provide a scattered polaroid effect for an in-page gallery, as a reaction to the complexity found in a couple of existing libraries - both of those other libraries expected JSON files containing the image URLs, which was parsed and iterated through to generate specific markup, and neither of the libraries could be easily modified to take the simpler and more flexible approach of being pointed at existing markup.

Thus, the script that evolved into Scatter was created, with a focus on providing an easy-to-integrate and configurable scattering effect with a clean core script - i.e. following the philosophy of doing one thing well, and also making it easy for others to understand (and extend if needed).

Scatter does not convert JSON to HTML for you - that's a distinct task from randomly arranging HTML elements - but it will work whether your HTML is static or dynamic, and it does not limit you to images styled as polaroids.

The versatility is demonstrated within the Scatter documentation, where a handful of examples show how it can be used to achieve vastly different effects.

Scatter does not require any external libraries, it's a single ~12KB file (~3KB compressed) and will run in any browser released in the past five years (earlier browsers will work with appropriate polyfills, available either from MDN or backwards compatibility libraries).

If you find any issues, or you have a need that Scatter almost-but-not-quite meets, feel free to either raise an issue or get in touch directly to discuss further.