Guida 동위원소 필터링

소개

Isotope è una libreria javascript che permette di filtrare e ordinare vari elementi. Questa guida vedremo에서 filtrarli로 오십시오.

리조세

Prima di tutto importiamo nel nostro 파일.html il cdn:

<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"></script>
<!-- o la versione Minified -->
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>

Oppure lo script della libreria che potrete trovare qui: Isotope Metafizzy . Inoltre potete inizializzare Isotope con jquery .

Se userete jquery importatelo prima dello script di isotope

Struttura HTML

Questo esempio vedremo에서 base al colore의 filtrare vari 상자가 제공됩니다.

필트리

Definiamo ogni filtro come un<button> e ad ognuno aggiungiamo l'attributodata-filter="" . data-filter inseriremo il nome della classe degli item che verranno filtrati alla pressione del medesimo bottone.

Importante sottolineare che il nome della classe in data-filter è preceduto da un punto.

Per visualizzare tutti gli elementi senza filtri aggiungiamo un bottone condata-filter="*" .

<div class="filter-button-group">
  <button data-filter="*">Show All</button>
  <button data-filter=".red">Red</button>
  <button data-filter=".blue">Blue</button>
  <button data-filter=".yellow">Yellow</button>
</div>

그리글리아 엘레멘티

Inseriamo in un container con una classe specifica i vari item che filtreremo. Per ogni item inseriamo una classe che lo identificherà come un elemento da filtrare (in questo caso box ). Inoltre aggiungiamo una classe che definerà la categoria dell'elemento ( red , yellow , blue ):

<div class="griglia">
  <div class="box yellow"></div>
  <div class="box red"></div>
  <div class="box blue"></div>
  <div class="box yellow"></div>
  <div class="box red"></div>
  <div class="box blue"></div>
  <div class="box yellow"></div>
  <div class="box red"></div>
  <div class="box blue"></div>
</div>

초기화

Javascript의 Inizializziamo il nostro 동위원소.

바닐라 자바스크립트:

var grigliaElementi = document.querySelector('.griglia');
var iso = new Isotope( grigliaElementi, {
  // options
});

con Jquery(컨실리아토):

var $isotope = $('.griglia').isotope({
  // options
});

Dove ci sono i commenti//options potrete inserire varie opzioni e il layout per la griglia. Potete trovare tutte le informazioni suIsotope Metafizzy .
Tutte le opzioni sono facoltative ma è consigliato usare semper itemSelector che non fa altro che specificare quali saranno gli elementi del layout.

질문에 대한 Quindi 예:

var $isotope = $('.griglia').isotope({
    itemSelector: '.box',
});

필트라지오

Aggiungiamo un evento ai bottoni che abbiamo settato in prezenza:

$('.filter-button-group').on( 'click', 'button', function() {
  var filterValue = $(this).attr('data-filter');
  $isotope.isotope({ filter: filterValue });
});

Ogni volta che un <button> verrà clickato la variabile filterValue sarà impostata con la classe contenuta in data-filter del bottone e poi isotope filtrerà gli elementi per noi.

Un esempio pratico:

(보너스) Griglia 반응형 e centrata

Vi capiterà di voler centrare la griglia degli elementi, per farlo il modo più semplice e efficace è inserire nelle opzioni del layout (di default) masonry l'opzione isFitWidth: true e impostare i margini della griglia su auto . Riprendiamo l'esempio 선례:

var $isotope = $('.griglia').isotope({
  masonry: {
    isFitWidth: true
  }
});

.griglia{
  margin: 0 auto;

Spero questa mini guida vi sia piaciuta , thinka di mettere ❤️ al post e seguirmi sui miei 사회적:

GitHub