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/，中间顶部的滑块与另一个内容块重叠。

只要调整窗口大小，滑块就会调整其宽度，从而校正滑块的高度。

任何人都知道如何在初始加载时获得滑块的高度？

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

Answer 2

我已经找到了解决这个问题的方法，即使它并不漂亮。我对砌体初始化做了延迟。

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

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

将Flexslider与砌体相结合

2 个答案: