Bootstrap 4 - Nécessité d'ajuster la maçonnerie Réduire la mise en page

Question

Solution:

Résolu échange CYCLE2 pour un script de diaporama similaire qui est réactif.

Slick

jsfiddle

 (function($) { 

    var $carousel = $('.carousel'), 
      $masonry = $('#cards'); 

    $carousel.on('afterChange', function(slick){ 

     $masonry.masonry({ 
      itemSelector: '.card-item' 
     }).on('shown.bs.collapse hidden.bs.collapse', function() { 
      $masonry.masonry(); 
     }); 

    }).slick({ 
     arrows: false, 
     speed: 0, 
     infinite: true, 
     autoplay: true, 
     autoplaySpeed: 400 
    }); 

})(jQuery); 

Original Question:

J'ai pris la carte colonne "maçonnerie" de bootstrap 4 et adapté pour fonctionner avec js de maçonnerie - ils ne soutenu B3 de ce que je pouvais trouver - moins les gouttières. Je suis en train de mettre un lien de réduction et c'est là que le problème est. Je ne peux pas obtenir l'élément de grille pour pousser son récipient vers le bas, ce qui reformaterait la disposition de la maçonnerie - je pense que j'ai correctement formulé cela.

Actuellement, il s'affiche et se cache correctement, mais la disposition reste la même et finit par s'afficher sous d'autres éléments au lieu de conserver la disposition de maçonnerie.

J'ai retiré toutes mes solutions pour que le violon soit purement et simplement sur ce point.

jsfiddle here

Je me sens comme il devrait comprendre les éléments suivants, mais pas de chance. : [

$grid.on('shown.bs.collapse', function() { 
    $grid.masonry('layout'); 
}); 

Essentiellement, lorsque l'effondrement est ouvert, garder la mise en page dans le tact, mais je ne peux pas traduire correctement au code.

Une autre tentative consistait à fusionner des événements bootstrap avec la disposition de maçonnerie. Cependant, je n'arrivais pas à le faire fonctionner.

$('.collapsing').on('show.bs.collapse', function() { 
    // do something… 
    $grid.masonry('layout'); 
}); 

Fiddle a les deux inclus.

Je pense que je besoin de quelque chose qui se lit plus comme

1. Quelle est la taille du récipient à fermeture
2. Qu'est-ce à ouvrir
3. Changer la mise en taille à ouvrir

Vous ne savez pas comment écrire le code correspondant. :/

Answer 1

Essayez cette méthode .on

(function ($) { 

    var $masonry = $('#cards'); 
    $masonry.masonry({ 
     itemSelector: '.card-item' 
    }).on('shown.bs.collapse hidden.bs.collapse', function() { 
     $masonry.masonry(); 
    }); 

})(jQuery); 

Voir violon travail https://jsfiddle.net/joshmoto/ax1d7ok6/

Le seul problème avec ceci est que la maçonnerie ne sera jamais animer naturellement avec la méthode de l'effondrement d'amorçage, la maçonnerie ne se déclenche une fois que le bootstrap l'effondrement est complet.Bummer je sais :-(