Question

我已完全遵循文档，布局完成事件不起作用。示例可以在这里看到：

<div id="items">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

#items {
    width: 500px;
}
.item { 
    background: #ff0000;
    width: 200px;
    height: 200px;
    margin-bottom:20px;
}

$(document).ready(function() {
    var $container = $('#items');
    $container.masonry({
        itemSelector: '.item',
        columnWidth: 220,
        gutter: 20
    });

    $container.masonry('on', 'layoutComplete', function(msnryInstance, laidOutItems) {
        alert("");
    });
});

任何人都知道这是一个已知错误还是我做错了什么？

Answer 1

您可以尝试

var msnry = new Masonry( $container, {
     itemSelector: '.item',
        columnWidth: 220,
        gutter: 20
  });

然后使用：

msnry.on( 'layoutComplete', function( msnryInstance, laidOutItems ) {
    //custom code
  });

触发布局以调用 layoutComplete 回调

msnry.layout();

请查看 this codepen

Answer 2

以下是在jQuery中执行此操作的代码：

public class StackOverflow32336833 {
    public static String text;
    public static String pattern;

    static {
        text = "123c12de34";
        pattern = "(?<=\\A|\\D)(\\d+)";
    }

    public static void printMatches(String text, String pattern) {
        Pattern p = Pattern.compile(pattern);
        Matcher m = p.matcher(text);

        while (m.find()) {
            System.out.println(m.group());
        }
    }

    public static void main(String[] args) {
        printMatches(text, pattern);
    }   
}

这是从本页底部获取的：http://masonry.desandro.com/options.html

Answer 3

您只需在致电masonry()

之前添加事件监听器

var $container = $('#items');
$container.on('layoutComplete', function() {
  console.log('complete');
});
$container.masonry({
  itemSelector: '.item',
  columnWidth: 220,
  gutter: 20
});

你甚至可以建立一个链：

$('#items').on('layoutComplete', function() {
  console.log('complete');
})
.masonry({
  itemSelector: '.item',
  columnWidth: 220,
  gutter: 20
});

Answer 4

啊我用非jquery方法对它进行了排序。初始化后，您必须调用以下函数来触发事件：

msnry.layout();

e.g

var container = document.querySelector('.masonry');
var msnry = new Masonry( container, {
    itemSelector: '.item',
    columnWidth: 220,
    gutter: 20
});

msnry.on( 'layoutComplete', function( msnryInstance, laidOutItems ) {
    alert("");
});

msnry.layout();

jQuery砌体布局完成事件无法正常工作

4 个答案: