jQuery: Combiner "portfolio filtrable" et maçonnerie

Question

J'essaie de combiner le "portfolio filtrable" (http://net.tutsplus.com/tutorials/javascript-ajax/creating-a-filterable-portfolio-with-jquery/) avec la disposition Maçonnerie ... donc je veux que mes articles se réajustent avec maçonnerie après les avoir filtrés, mais ils rester dans la position où masonery les mettre ...

voici mon premier site web projet très rude: http://waynetest.kilu.de/lula/ (travaux évidemment en cours ..;))

est-il possible de combiner les deux js-scripts?

merci beaucoup, katharina

Answer 1

Je voulais la même chose et ont finalement fonctionner.

Voir: http://jasondaydesign.com/masonry_demo/

Espérons qui fonctionne pour vos besoins.

Answer 2

Vous pouvez toujours essayer http://isotope.metafizzy.co/

Answer 3

d'abord créer un div caché et mettre les réelles des données. Dans cet exemple, nous l'appelons #hidden. Ensuite, créez un div vierge pour la maçonnerie principale. Nous l'appelons #masonry. Donc, nous avons quelque chose comme cela jusqu'à présent:

<div id="hidden"> ... CONTAINING THE ACTUAL DATA ... </div> 
<div id="masonry"></div> <!-- which is a blank div --> 

Les articles seront détectés par leurs données rel afin de ne pas oublier de tous les filtres sous forme de données-rel aux éléments. Par exemple:

<div class="work" data-rel="Template Design">CONTENT</div> 

Comme les filtres, créez une liste comme ceci:

<ul id="port_filter"> 
    <li data-rel="all" class="active">All</li> 
    <li data-rel="Graphic Design">Graphic Design</li> 
    <li data-rel="Template Design">Template Design</li> 
    <li data-rel="Programming">Programming</li> 
</ul> 

Maintenant, gérer le remplissage initial et des fonctions de filtrage de cette façon:

// Initial loading 
var all = $('#hidden .work'); 
$('#masonry').html(all); 
$('#masonry').masonry({ 
    itemSelector: '.work', 
    columnWidth: 299 
}); 

// Portfolio filtering 
$('#port_filter li').click(function(){ 
    if($(this).hasClass('active')) { 
     return; 
    } 
    else { 
     $('#port_filter li').removeClass('active'); 
     var filter = $(this).attr('data-rel'); 
     $(this).addClass('active'); 
     if(filter == 'all') { 
      $('#masonry').html(all); 
      $('#masonry').masonry(); 
     } 
     else { 
      $('#masonry').html('').html(all); 
      removed = null; 
      var removed = $('#masonry .work[data-rel!="' + filter + '"]'); 
      removed.remove(); 
      $('#masonry').masonry(); 
     } 
    } 
}); 

Cette méthode est testée sur la maçonnerie v4 et le meilleur.