2017-06-14 58 views
1

解決方案:引導4 - 需要坍塌調整砌體佈局

解決交換循環2一個類似的幻燈片腳本的響應。

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

原題:

我從引導4所採取的卡列 「磚石」 和它改編與磚石JS工作 - 他們只從我能找到的支持B3 - 減去排水溝。

我正在放置一個摺疊鏈接,這就是問題所在。我無法讓網格物品推下它的容器,這將重新格式化砌體佈局 - 我認爲我正確地表達了這一點。

它目前顯示和隱藏很好,但佈局保持不變,所以它最終顯示在其他元素下而不是保持砌體佈局。

剝離了我所有的解決方案,所以小提琴純粹是佈局了這一點。

jsfiddle here

我覺得它應該包括以下內容,但沒有運氣。 :[

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

從本質上講,當崩潰是打開的時候,保持layout的機智,但我不能正確地將它翻譯成代碼。

另一個嘗試是將引導程序事件與砌體佈局合併。儘管如此,我還是無法實現。

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

小提琴包括這兩個。

我想我需要的東西,讀起來更像是

  1. 什麼是在關閉
  2. 容器大小是什麼在開放
  3. 更改佈局尺寸,在開放

不知道如何爲它編寫代碼。 :/

回答

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/

與此唯一的問題是磚石絕不會自然地引導崩潰方法動畫,磚石纔會觸發一次引導崩潰完成。Bummer我知道:-(

+0

我沒有改變任何外部來源從你的小提琴兄弟:-) – joshmoto

+0

按鈕把我扔了。讓我來實現並看看它是如何處理的。我認爲這解決了這個問題。 –

+0

對不起,我不得不重建演示,以簡化HTML,所以我可以讓我的頭。我們的方法是一樣的,bs4在砌磚容器內的bs4卡片元素中的倒塌元件 – joshmoto