Динамическая структура страницы, позволяет вам определить на сколько строк и столбцов должны быть разбиты элементы страницы.

Наверняка вы видели страницу визуализации Google Trends, где запросы пользователей показываются в красивой сетке в режиме реального времени.

Мы же хотели просто сделать функционал, позволяющий контролировать число колонок и столбцов элементов на странице. Другой особенностью должен был стать “резиновый” эффект. Эффект анимации, применяем при изменении количества элементов на странице, к примеру с 5x5 на 2x3.

Мы старались сделать что-то подобное: динамическую структуру страницу с применением эффектов. Сама анимация реализована через JavaScript, однако поворот, изменение размера, через CSS.

Сначала мы вычисляем позицию и размеры каждой ячейки и в зависимости от этих показателей, распределяем по странице. Все значения заданы в % чтобы сделать страницу резиновой. К элементам, которые нужно скрыть будет добавлен специальный класс (в зависимости от которого потом к данному элементу будет применён тот или иной эффект).

Заметьте, что в данном примере, мы использовали Modernizr http://modernizr.com/ для того, чтобы обеспечить прикосновение на тачпадах. Так же мы воспользовались classie.js http://github.com/desandro/classie от David De Sandro.

Пример использование:

Grid.init( {
    transition : true,
    speed : 450,
    delay: 20
} );

Примеры:

1. Без анимации

2. Анимация без задержки

3. Анимация с задержкой