javascript - 使用图像维护砌体项目顺序

Question

我无法保持砌体物品的顺序，因为它们都有在不同时间加载的图像。我的所有项目都以有序的方式处理，对于每个项目，我都运行这一行来添加它们：

$('#grid').append($div).imagesLoaded(function() {
    $div.show();
    $('#grid').masonry('appended', $div, true);
    $('#grid').data('masonry').layout();
});

问题是每个 div 都有一个加载随机时间的图像，因此加载第一个图像的 div 会排在前面（超出通常的顺序）。

我知道 jQuery 有一些排队功能，但我不确定如何在这里应用它们。

Answer 1

所以，我最终使用了队列。我已将单个功能更改为

$('#grid').queue('items', function( next ) {
    $('#grid').imagesLoaded(function() {
        $div.show();
        $('#grid').masonry('appended', $div, true);
        $('#grid').data('masonry').layout();
        next();
    });
});

添加每组元素后，我只需调用

$('#grid').dequeue('items');

这似乎解决了目前的排序问题。