Javascript 柔性滑块与砌体的结合

我结合了一些jQuery:Flexslider和Mashiness。 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

在nwmorush_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,
     }); 
   });

初始页面上，如图所示，中间的顶部滑块与另一个内容块重叠。

调整窗口大小后，滑块将调整其宽度大小，从而更正滑块的高度

有人知道如何在初始加载时获得滑块的正确高度吗？

您需要使用。重叠是在加载所有图像之前由砖石烧制引起的。加载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,
 }); 
 }); 
 });

---

我已经找到了一个解决办法，尽管它并不漂亮。我已经把砖石工程延期了

function loadMasonry() {    
***fire masonry***    
}        
setTimeout(loadMasonry, 500);

---

现在它工作正常了。有人知道如何正确解决这个问题吗？

可能是时间问题；我已经尝试过了，但是它不起作用。谢谢你的回复。我刚刚试过，但我在控制台中看到一些错误：EventEmitter不是函数和容器。imagesLoaded不是函数我得到：Uncaught TypeError:EventEmitter不是函数和Uncaught ReferenceError:imagesLoaded不是定义的你没有加载imagesLoaded.js你是对的，我的错误。将其放入错误的函数文件中。然而，现在我已经正确地完成了这项工作，我没有收到更多的错误，但是重叠的问题仍然存在。您很可能需要将您的横幅Flexslider代码放在上面：

$（'#侧滑块'）。Flexslider（{…}）也在imagesloaded函数中，因为这些图像是砖石容器的一部分。或者我可以从Flexslider“start function”属性中激发砖石。（滑块加载第一张幻灯片时激发。）这似乎是一个更好的选项。