Comment appliquer un filtre par défaut pour le conteneur après l'insertion dynamique d'éléments à l'aide de Jquery Isotope plugin?

Si vous avez quelque chose de simple comme

<ul id="filters">
    <li><a href="#" data-filter=".home">Show all</a></li>
    <li><a href="#" data-filter=".what">What?</a></li>
    <li><a href="#" data-filter=".when">When?</a></li>
    <li><a href="#" data-filter=".why">Why?</a></li>
    //and so forth...
</ul>

vous pouvez simplement exécuter une fonction de préréglage de filtrage, une fois le DOM a été entièrement construite

$(function() {
    //Isotope stuff...
    $container.isotope({filter: '.home'});
    //more Isotope stuff...
});

et Isotopique a été initialisé. Voir cette modification DeSandro violon dans lequel la première est filtré pour afficher uniquement les éléments rouges.

Mise à JOUR de Chargement initial contenu dans un vide #conteneur (via Ajax?), vous pouvez utiliser le méthode d'insertion ou tout simplement cacher la #conteneur jusqu'à ce que tous les éléments ont été chargés et triés. Concernant l'Ajax et de l'initialisation de l'Isotope en cas de succès, voir aussi cette SORTE de réponse ici.

Je suis un peu en retard à la fête, mais j'ai eu la même question quand je travaillais avec des Isotopes hier et fini par le résoudre d'une manière différente.

Disons que j'ai un groupe de boutons de filtre, à l'instar de ce monopole d'état a:

<div id="filters">
  <button data-filter="*">Show all</button>
  <button data-filter=".hidden">Archived</button>
  <button data-filter="*:not(.hidden)">Current</button>
</div>

Peut-être, je veux seulement montrer le "Courant" filtre lorsqu'un utilisateur termine le chargement de la page. Je définir une variable pour le sélecteur CSS correspondant au filtre que je voulais. Nous allons utiliser cette variable plus tard.

var $grid;
var filterValue = "*:not(.hidden)";

Prochaine, j'ai besoin d'initialiser le contenu de mon. J'ai déjà eu mon contenu prêt à aller, alors j'ai sauté cette étape, mais vous pouvez utiliser un JavaScript Promesse si vous avez l'intention de charger le contenu de manière asynchrone.

C'est un exemple que j'ai pris d' Google Promesse de l'introduction de l'article:

var promise = new Promise(function(resolve, reject) {
  var content = [];

  //do a thing, possibly async, then…

  if (content.length > 0) {
    resolve(content);
  }
  else {
    reject(Error("Nothing loaded"));
  }
});

Voici la fonction que j'ai utilisé pour mettre en place les isotopes de la grille et de l'écouteur d'événement:

function init() {
  //Initialize isotope and the filter method we want to use
  $grid = $('.grid').isotope({
    itemSelector: '.grid-item',
    filter: function() {
      return filterValue ? $(this).is(filterValue) : true;
    }
  });

  //Event listener for the filter buttons
  $('#filters').on('click', 'button', function() {
    filterValue = $(this).attr('data-filter');

    $(this).addClass('active')
           .siblings().removeClass('active');

    //Refresh the isotope grid to display the filtered items
    $grid.isotope();
  });
} 

Une fois que vous avez défini la promesse devrait le faire, vous pouvez initialiser votre isotopique de la grille. Vous aurez besoin de nid dans le then méthode afin qu'elle ne s'exécute une fois que la promesse a été résolues avec succès. Cela permet également de mettre en place toutes les réserves qui doivent s'exécuter dans le cas où votre contenu-étape de chargement échoue.

promise.then(function(results) {

  //Function defined in the last code snippet
  return init();

}, function(err) {
  //Error: "Nothing loaded"
  console.log(err); 

  //If you have a banner hidden on the page, you can display it
  $('.message').show();
});

Si vous n'avez pas besoin d'utiliser une promesse (comme dans mon cas), alors tout ce que vous devez faire est ceci:

init();