javascript - 将 Flexslider 与 Masonry 相结合

Question

我正在结合一些 jQuery:Flexslider 和 Masonry。Flexslider由global.js触发:

$(window).load(function() {

    // Banner FlexSlider
    $('#side-slider').flexslider({
        animation: 'slide',
        slideshow: true,
        smoothHeight: false,
        controlNav: false,
        directionNav: false,
        slideshowSpeed: 5000,
        controlsContainer: ".flexslider-container",
    });

}); // End on window load

砌体在 nwmasonry_init.js 中触发:

   jQuery(document).on('ready', function() {
     var $ = jQuery;

     //Masonry
     var container = document.querySelector('.overzicht');
     var msnry = new Masonry(container, {
       itemSelector: '.bedrijven',
       gutter: '.gutter-sizer',
       transitionDuration: 0,
     }); 
   });

在初始页面加载时，可以在此处看到 http://nieuws.ditisonzewijk.nl/category/brandevoort/顶部中间的 slider 与另一个内容 block 重叠。

一旦调整窗口大小， slider 就会调整其宽度，因此 slider 的高度也会得到纠正。

有人知道如何在初始负载时获得 slider 的高度吗？

Answer 1

您需要使用imagesloaded.js 。重叠是由于在所有图像加载之前砌体烧制造成的。加载 imagesloaded 脚本并尝试以下代码:

jQuery(document).on('ready', function() {
 var $ = jQuery;

 //Masonry
 var container = document.querySelector('.overzicht');
 imagesLoaded(container, function() {
 var msnry = new Masonry(container, {
   itemSelector: '.bedrijven',
   gutter: '.gutter-sizer',
   transitionDuration: 0,
 }); 
 }); 
 });