Get new jQuery plugins just once a week

×

Freetile-js

September 2, 2012

Freetile-js | Create dynamic and responsive layouts

Freetile-js is a plugin for jQuery that enables the organization of webpage content in an efficient, dynamic and responsive layout. It can be applied to a container element and it will attempt to arrange it’s children in a layout that makes optimal use of screen space, by “packing” them in a tight arrangement.Freetile has been the layout engine behind Assemblage for almost two years.
Freetile is inspired by similar, existing efforts such as Masonry and Wookmark. However, it differs from these solutions because it allows for any size of elements to be packed without using a fixed-size column grid, so you don’t have to worry about specifying a column width appropriate to the size of your elements.
The algorithm that evaluates each possible insertion position is easily customizable, allowing for different preferences to be expressed, e.g. a preference to left- or right-alignment of elements, or proximity between certain elements.

The other additional feature is-
A smart animation routine allows distinguishing between elements that is meaningful to be animated and ones that are not (e.g. elements that have been just added to the arrangement, or those that are not visible). Special classes allow for explicitly limiting animation to select elements.

$('#container').freetile({
animate: true,
elementDelay: 30
});

Created by Yannis Chatzikonstantinou

Download

Example

freetile-js

Dynamic and responsive layout

Freetile-js

Related posts:

Metro js
Dynamic Carousel
imageFill-js
freetile-js

http://jquer.in/wp-content/uploads/2012/09/freetile-js.png

jQuery plugin

Sign up for our weekly newsletter.

* We won't spam you ever