Как реализовать функционал плагина isotope на чистом js?

Question

[Mak354]

В общем при клике на эти кнопки должны меняться картинки местами, такой функционал есть в jquery плагине isotope но я хочу научиться делать сам, помогите пожалуйста кто в этом разбирается, хотя бы дайте наводку куда копать, спасибо

Answer 1

[DivineDraft]

Как сделано - в самом исходном коде скрипта isotope, в подробностях, если у вас нету представлений даже по написанию, то у Вас вряд ли получится реализовать подобное. В распакованной версии на данный момент - 1232 строчки.

Для написания легкой версии, можно просто использовать стили (css) и пару скриптов, которые будут добавлять классы. Шаги:
1. Поместить необходимые элементы сортировки в один контейнер.
2. Добавить к каждому элементу дополнительный класс в зависимости от категории.
3. При нажатии на одну из кнопок сортировок - Добавлять класс к главному контейнеру. В стилях прописать значение, которые будет добавлять нужным категориям display:block, а всем остальным display:none. По желанию добавить анимации. Пример основного кода:

<div class="Buttons">
 <button>Показать 1 категорию</button>
 <button>Показать 2 категорию</button>
 <button>Показать 3 категорию</button>
</div>
<div class="categories">
 <a href="" class="cat1">Категория 1</a>
 <a href="" class="cat2">Категория 1</a>
 <a href="" class="cat3">Категория 1</a>
</div>

Пример срабатывания: при нажатии Показать 2 категорию, добавляем класс к categories - viewcats2.
Стили

.viewcats2 a {display:none;}
.viewcats2 .cat2 {display:block;}