Как создать анимацию типа Quicksand только с помощью jQuery

Question

Мне бы хотелось иметь анимацию, подобную анимации в Quicksand

Пример анимации Quicksand

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

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

Спасибо, ребята.

Answer 1

Основная концепция заключается в следующем:

1. сохраните первую коллекцию на мгновение, затем загрузите вторую с помощью display:hidden.

2. Определение дублетов и скрытие всего остального из первой коллекции.

3. Показать новую коллекцию, сохранив те, которые имеют дублеты hidden

4. Рассчитать смещение для недостающих предметов, переместить старые в эту позицию.

5. Показать дублеты из новой коллекции и удалить старые из DOM

Answer 2

Это не кажется супер сложным.Хотя не совсем так, как в приведенном вами примере.

http://net.tutsplus.com/tutorials/javascript-ajax/creating-a-filterable-portfolio-with-jquery/

или

http://www.gethifi.com/blog/a-jquery-plugin-to-create-an-interactive-filterable-portfolio-like-ours