Asked Mar 18th, 4:40 AM 157 0 2
  • 157 0 2
0

Div bị trồng lên nhau khi append bằng AJAX, thư viện Mansory

Share
  • 157 0 2

Mình có sử dụng thư viện Mansory để làm layout, khi dùng AJAX để append dữ liệu mới thì gặp phải vấn đề ảnh bị trồng lên nhau ở 1 số vị trí. Nó sẽ tự hết khi scroll hoặc resize màn hình. Ai dùng thư viện này rồi có thể cho mình hướng xử lý được không nhỉ?

Trồng lên nhau

Kết quả mong muốn

js

for (var i = 0; i < data.length; i++) {
    let content = '<div class="grid-item photo">'
                +'<a href="'+route('recipe.detail', data[i].slug)+'">'
                +'<div class="item-content">'
                +'<img class="photothumb" src="'+data[i].finished_image+'">'
                +'<div class="item-desc">'
                +'<span class="recipe-name">'+data[i].name+'</span>'
                +'<div class="user-information">'
                +'<a href="">'
                +'<img src="'+data[i].user.avatar+'">&nbsp;'
                +'<span>'+data[i].user.name+'</span>'
                +'</a>'
                +'</div>'
                +'<div class="button-block">'
                +'<a href="javascript:;" class="btn-like"><i class="fa fa-heart-o" aria-hidden="true"></i>&nbsp;'
                +'<span>'+data[i].liked+'</span></a>'
                +'<a href="javascript:;" class="btn-save"><i class="fa fa-thumb-tack" aria-hidden="true"></i>&nbsp;'
                +'<span>'+data[i].thumbtacked+'</span></a>'
                +'</div>'
                +'</div>'
                +'</div>'
                +'</a>'
                +'</div>';

    let $content = $(content)
    $grid.append( $content ).masonry( 'appended', $content );
    $grid.masonry('layout');
}

2 ANSWERS


Answered Mar 18th, 6:11 PM
Accepted
+2

Khả năng cao là khi ajax ảnh của bạn chưa kịp load mà đã đc append vào dom nên nó tính sai về kích thước gây ảnh bị chồng. Mình thấy phần lớn là do nó. Masonry hay đi với thư viện imagesload để xử lý cái này:

$grid.imagesLoaded().progress( function() {
    $grid.masonry('layout');
});

Hoặc bạn có thể reload lại mỗi khi append xem

jQuery("#content").append(el).masonry( 'reload' );

Hoặc tự kích hoạt sự kiện scroll or resize để fix.

Link tham khảo có khá nhiều cách ko biết bạn trong trường hợp nào mình cũng từng bị và fix bằng cách thử từng cách 1 mà tìm đc 👍

Share
Tuan Anh Nguyen @TuanAnh9996
Mar 19th, 2:23 AM

okay bạn, để mình thử xem. Nhưng nếu mà tự dùng sự kiện scroll hoặc resize thì có ảnh hưởng đến trải nghiệm người dùng không nhỉ?

0
| Reply
Share
Answered Mar 19th, 2:48 AM
0

Mình dùng cách

$grid.imagesLoaded().progress( function() {
    $grid.masonry('layout');
});

Còn dùng method Reload thì mansory báo là not valid method

jQuery("#content").append(el).masonry( 'reload' );

Share
Lê Vĩnh Thiện @le.vinh.thien
Mar 20th, 3:28 PM

vậy là đã fix rồi à?

0
| Reply
Share
Tuan Anh Nguyen @TuanAnh9996
Mar 20th, 3:44 PM

@le.vinh.thien mình tích Accept answer rồi kìa bạn 😄

+1
| Reply
Share