Каменная кладка JQuery не работает после нажатия ajax

Question

У меня проблема с моим кодом ajax. Я создал a DEMO от jsfiddle.net

В этой демонстрации вы можете видеть, что система сетки работает нормально. Но когда вы нажимаете кнопку для загрузки большего количества сообщений, проблема будет возникать в это время.

В чем проблема с моим кодом? Кто-нибудь может мне помочь в этом отношении?

$(document).ready(function() { 
function loadMore() { 
    $('.posts-holder').append('<div class="kesif-gonderi-alani" style="height:300px; background:blue;">6</div>'); 
    $('.posts-holder').append('<div class="kesif-gonderi-alani" style="height:300px;">7</div>'); 
    $('.posts-holder').append('<div class="kesif-gonderi-alani" style="height:300px;">8</div>'); 
    $('.posts-holder').append('<div class="kesif-gonderi-alani" style="height:300px;">9</div>'); 
    $('.posts-holder').append('<div class="kesif-gonderi-alani" style="height:300px;">10</div>'); 

    } 
    function ajax() { 
    // fake request 
    setTimeout(function(){ 
     loadMore(); 
     test(); 
    },1500); 
    } 
    $('.button').bind('click', function(e){ 
    e.preventDefault(); 
    ajax(); 

    }); 
    function test(){ 
    var $container = $(".posts-holder"); 
    $container.imagesLoaded(function() { 
    $container.masonry({ 
     columnWidth: ".kesif-gonderi-alani", 
     itemSelector: ".kesif-gonderi-alani" 
    }); 
    }); 
    } 
    test(); 
}); 

Answer 1

Используйте Masonryappend метод InstEd из одного JQuery. Я загрузил в fiddle функцию loadMore.

function loadMore() { 

    var $items = $('<div class="kesif-gonderi-alani" style="height:300px;">6</div><div class="kesif-gonderi-alani" style="height:300px;">7</div><div class="kesif-gonderi-alani" style="height:300px;">8</div><div class="kesif-gonderi-alani" style="height:300px;">9</div><div class="kesif-gonderi-alani" style="height:300px;">10</div>'); 

     $('.posts-holder').append($items) 
     // add and lay out newly appended items 
     .masonry('appended', $items); 
} 

append метод масонства нужен объект JQuery. Таким образом, в вашем реальном вызове ajax вы создадите этот новый объект и поместите его в качестве аргумента в метод append.