cách kích hoạt/tải lại plugin Masonry khi nhấp vào

Question

Vì tôi có các tab khác nhau, khối xây không tải các mục bị ẩn, vì vậy khi tôi nhấp vào tab mới, hình ảnh chồng lên nhau, tôi biết câu hỏi này đã được hỏi trước và trả lời bằng kích hoạt nề bằng cách nhấp vào tab, nhưng làm thế nào tôi sẽ đi về làm điều này mà không rối tung lên tab đầu tiên.

Hiện nay gọi nề với

$(function(){ 
$('#container').masonry({ 
// options 
itemSelector : '.item', 
columnWidth : 260 
    }); 
});` 
$(window).load(function(){ $('#container').masonry(); }); 

và tương tự cho tab 2 nhưng với một khác nhau ID - # container2

tab một hoạt động hoàn hảo nhưng tab hai ngăn xếp những hình ảnh, cho đến khi bạn thay đổi kích thước trình duyệt mà sửa chữa nó và hoạt động như bình thường

Answer 1

có, bạn có thể tải lại xem nề về sự kiện onclick như sau: -

Sử dụng $container.masonry('reload'); nếu nó phù hợp với bạn. Trong trường hợp của tôi Nó không hoạt động. Tôi đã thực hiện bằng cách sử dụng setTimeout(function(){ $container.masonry() }, 400);. gọi nề trong hàm setTimeout.

$(document).ready(function($) { 
    var $container = $('#youContainerId'); 
    $("#TabId").live("click",function(){ 
     //$container.masonry('reload'); 
     setTimeout(function(){ $container.masonry() }, 400); 
    }); 
}); 

Answer 2

Làm điều đó như thế này:

$(function(){ 
    $('#container').masonry({ 
     // options 
     itemSelector : '.item', 
     columnWidth : 260 
    }); 
}); 

var masonryUpdate = function() { 
    setTimeout(function() { 
     $('#container').masonry(); 
    }, 500); 
} 
$(document).on('click', masonryUpdate); 
$(document).ajaxComplete(masonryUpdate); 

Không bao giờ lo lắng về nó một lần nữa! Hoặc, bạn có thể gọi lại sau các hoạt ảnh khác, như:

$('#something').slideDown(600, masonryUpdate); 

Thậm chí nếu bạn không làm như vậy, chỉ cần nhấp vào bất kỳ đâu trong trang và khối xây sẽ cập nhật.