带有Flexslider的砌体

Question

我在Wordpress中使用Masonry布局时遇到了困难。我已经在使用ImagesLoaded了，但由于这段代码，它不能与Flexslider一起使用。

.flexslider .slides > li {
  display: none;
  -webkit-backface-visibility: hidden;
}

我确实试着把它改成下面的这个，但它并没有按照我想要的方式工作

.flexslider .slides > li:nth-child (1n+2) {
  display: none;
  -webkit-backface-visibility: hidden;
}

我当前的jQuery代码是：

jQuery(function ($) {
var $container = $('.grid-masonry');
        $container.imagesLoaded( function() {
        $container.masonry({
                itemSelector: 'article',
                singleMode: true,
            });
        });
});

jQuery(function ($) {
    $(window).load(function() {
          $('.flexslider').flexslider({
            animation: "slide",
            controlNav: false,
            prevText: "", 
            nextText: "",
          });
        });
});

有人知道如何在砖石布局之前先加载柔性滑块，这样帖子项目就不会重叠吗？

Answer 1

经过几天的搜索，我终于找到了一个适合我的解决方案。

将以下代码添加到Flexslider中就成功了：

start: function(){
                 var $container = $('.grid-masonry');
                $container.imagesLoaded( function() {
                $container.masonry({
                        itemSelector: 'article',                        
                    });
                }); 
            },

完整版本：

jQuery(function ($) {
    $(window).load(function() {
          $('.flexslider').flexslider({
            animation: "slide",
            controlNav: false,
            prevText: "", 
            nextText: "",
            start: function(){
                 var $container = $('.grid-masonry');
                $container.imagesLoaded( function() {
                $container.masonry({
                        itemSelector: 'article',                        
                    });
                }); 
            },
          });
        });
});