Question

解决方案：

解决了交换Cycle2以获得响应的类似幻灯片脚本。

     (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);

原始问题：

我从bootstrap 4采取了卡片栏“砌体”，并将其改编成与砖石js一起使用 - 他们只能从我能找到的地方支持B3 - 减去排水沟。

我正在处理崩溃链接，这就是问题所在。我无法让网格项目将其容器向下推，这将重新格式化砌体布局 - 我想我的措辞正确。

它目前显示和隐藏正常，但布局保持不变，因此最终显示在其他元素下，而不是保持砖石布局。

将我的所有解决方案都删除掉，这样小提琴就完全是布局了。

jsfiddle here

我觉得它应该包含以下内容，但没有运气。：

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

基本上，当崩溃打开时，请保持布局，但我无法正确地将其转换为代码。

另一种尝试是将引导事件与砌体布局合并。但是，我无法让它发挥作用。

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

Fiddle包含了这两个。

我认为我需要的内容更像是

关闭时的容器尺寸是什么

什么是开放

将布局更改为打开时的尺寸

不确定如何为其编写代码。：/

Answer 1

试试这个.on方法

(function ($) {

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

})(jQuery);

请参阅工作小提琴https://jsfiddle.net/joshmoto/ax1d7ok6/

唯一的问题是砌体永远不会自然地使用自举崩溃方法制作动画，只有在引导程序崩溃完成后才会触发砌体。我知道这一点： - （

Bootstrap 4 - 需要折叠来调整砌体布局

1 个答案: