javascript - ajax 单击后 JQuery 砌体不起作用

Question

我的 ajax 代码有问题。我创建了一个 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

使用 Masonry append 方法代替了 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);
}

Masonry 的append 方法需要一个jQuery 对象。因此，在您真正的 ajax 调用中，您将创建这些新对象并将它们作为参数放入 append 方法中。