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

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');

这似乎暂时解决了排序问题。

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

Maintaining masonry item order with images

javascript

jquery

queue

jquery-masonry

imagesloaded