How to use shufflejs - 8 common examples

.then(() => {
        // initialize a shuffle instance.
        this.shuffle = new Shuffle(this.element, {
          itemSelector: '.post',
          sizer: document.getElementsByClassName('sizer')[0],
          delimeter: ',',
          initialSort: {
            by: sortByDate,
            reverse: true,
          },
          group: filterGroup,
        });
        this.shuffle.resetItems();
        this.addShuffleEventListeners();
      });
    // temporarily set data attribute taborder = 'visual' to focusable eleements outside this commponent

this.shuffle.filter((element, shuffle) => {
            // If there is a current filter applied, ignore elements that don't match it.
            if (shuffle.group !== Shuffle.ALL_ITEMS) {
              // Get the item's groups.
              const groups = element.getAttribute('data-groups');
              // remove empty values from filter list
              let activeFilters = shuffle.group.filter((el) => el !== '');
              // for each active filter, check against element groups
              for (i=0; i

$el.attr('tabindex', lastTabindex);
            lastTabindex++;
        };

        // Try to find all selectable elements that appear _after_ this grid and set the tabindex explicitly
        $gridEl.parents().prevAll().find("a, input, button, [tabindex]").filter(":visible:not(:disabled)").each((i, el) => overrideTabindex($(el)));

        getSortedItems().forEach(($item) => {
            $item.find("a").attr("tabindex", lastTabindex);
            lastTabindex++;
        });

        // Try to find all selectable elements that appear _after_ this grid and set the tabindex explicitly
        $gridEl.parents().nextAll().find("a, input, button, [tabindex]").filter(":visible:not(:disabled)").each((i, el) => overrideTabindex($(el)));
    };
    grid.on(Shuffle.EventType.LAYOUT, () => {
        recalcTabindexes();
    });
    recalcTabindexes();

    if ($gridEl.parents(".tab-pane").length > 0) {
        // We're inside a tab content, so the list might disappear and reappear
        let tabId = $gridEl.parents(".tab-pane").attr("id"),
            $tab = $(".nav-link[href=\"#" + tabId + "\"]");
        $tab.on("shown.bs.tab hidden.bs.tab", () => {
            // TODO: We don't actually need to update and show the effect every time
            grid.update();
        });
    }

    let $groupRadios = $(".filter-organizations input[type=radio]"),
        $groupDropdownLinks = $(".filter-organizations a"),

componentDidMount(){
    this.shuffle = new Shuffle(this.shuffleDemo, {
      itemSelector: '.shuffle-item',
      sizer: this.sizer,
    });
  }
  componentDidUpdate() {

componentDidMount(){
    this.shuffle = new Shuffle(this.shuffleDemo, {
      itemSelector: '.photo-item',
      sizer: this.sizer,
    });
  }
  componentDidUpdate() {

addShuffleEventListeners = () => {
    this.shuffle.on(Shuffle.EventType.LAYOUT, (data) => {
      PostsGrid.adjustBkgSize();
    });

    this.shuffle.on(Shuffle.EventType.REMOVED, (data) => {
      PostsGrid.adjustBkgSize();
    });
  }

addShuffleEventListeners = () => {
    this.shuffle.on(Shuffle.EventType.LAYOUT, (data) => {
      PostsGrid.adjustBkgSize();
    });

    this.shuffle.on(Shuffle.EventType.REMOVED, (data) => {
      PostsGrid.adjustBkgSize();
    });
  }

$(function () {
    let $gridEl = $('.persons-list'),
        sortByName = (el) => {
            return el.getAttribute('data-name').toLowerCase();
        },
        sortByGroup = (el) => {
            return el.getAttribute('data-group-names').toLowerCase();
        },
        grid = new Shuffle($gridEl, {
            itemSelector: 'li.person',
            isCentered: false,
            initialSort: {by: sortByName}
        });

    $gridEl.css("min-height", $gridEl.height() + "px");

    let $sortSelector = $(".sort-selector");
    $sortSelector.find("a").click((ev) => {
        ev.preventDefault();
        let $selectedNode = $(ev.currentTarget),
            sort = $selectedNode.data("sort");
        $sortSelector.find(".current-mode").text($selectedNode.text());
        if (sort === 'name') {
            grid.sort({by: sortByName});
        }