การรักษาลำดับรายการก่ออิฐด้วยรูปภาพ

ฉันมีปัญหาในการรักษาลำดับสิ่งของที่ทำด้วยอิฐ เนื่องจากสิ่งของทั้งหมดมีรูปภาพที่โหลดในเวลาต่างกัน สินค้าทั้งหมดของฉันได้รับการประมวลผลตามลำดับ และสำหรับแต่ละรายการ ฉันเรียกใช้บรรทัดนี้เพื่อเพิ่ม:

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

ปัญหาคือแต่ละ div มีรูปภาพที่โหลดในระยะเวลาสุ่ม ดังนั้น div ที่โหลดรูปภาพแรกจะไปที่ด้านหน้า (ไม่อยู่ในลำดับปกติ)

ฉันรู้ว่า jQuery มีฟังก์ชันการเข้าคิวอยู่บ้าง แต่ฉันไม่แน่ใจว่าจะนำไปใช้ที่นี่ได้อย่างไร


javascript queue jquery jquery-masonry imagesloaded
person Vladislav Dimitrov    schedule 17.01.2018    source แหล่งที่มา
comment
คำถามนี้มีคำตอบแล้วที่นี่   -  person Alfalfa    schedule 17.01.2018

คำตอบ (1)


arrow_upward
0
arrow_downward

เลยลงเอยด้วยการใช้คิว ฉันได้เปลี่ยนฟังก์ชั่นส่วนบุคคลเป็น

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

หลังจากเพิ่มองค์ประกอบแต่ละชุดแล้ว ฉันก็แค่โทร

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

และดูเหมือนว่าจะสามารถแก้ปัญหาการเรียงลำดับได้ในตอนนี้

person Vladislav Dimitrov    schedule 17.01.2018