Filtrage de la grille de maçonnerie dans Javascript-Soyablejs

Voir Prévia

Description

SDICABLEJS est un plugin JavaScript léger et facile à utiliser pour filtrer à travers un ensemble d’éléments de grille avec un effet aléatoire subtil .

Opération

Téléchargez et insérez les fichiers de la Tuhasty dans le document.

<link rel="stylesheet" href="/path/to/sortable.min.css"><script src="/path/to/sortable.min.js"></script>

catégoriser les éléments du Grille à l’aide de l’attribut ‘DATA-SJSEL’:

<div class="sjs-default"><div data-sjsel="javascript">Item 1</div><div data-sjsel="css">Item 2</div><div data-sjsel="html">Item 3</div><div data-sjsel="css">Item 4</div><div data-sjsel="javascript">Item 5</div>...</div>

Créer des liens pour filtrer les éléments de la grille.

<ul><li><a data-sjslink="javascript">JavaScript</a></li><li><a data-sjslink="css">CSS</a></li><li><a data-sjslink="html">HTML</a></li></ul>

initialiser le S Ortablajs et prêt.

document.querySelector('#sortable').sortablejs()

options possibles pour personnaliser la grille de maçonnerie.

document.querySelector('#sortable').sortablejs({// filter linkslinks: document.querySelectorAll(''),// active classactive:'is-active',// in pixelsmargin: 20,// for responsiveresponsive: {980: {columns: 3},480: {columns: 2},0: {columns: 1}},// fade in/out durationfadeDuration:{in: 300,out: 0}})