ajax点击后,JQuery砌体无法正常工作

时间:2016-02-28 22:18:12

标签: javascript jquery ajax

我的ajax代码有问题。我从jsfiddle.net

创建了 DEMO

在这个演示中,您可以看到它正常工作的网格系统。但是当你点击按钮加载更多帖子时,问题就会出现在那个时候。

我的代码有什么问题?在这方面,任何人都可以帮助我吗?

$(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();
});

1 个答案:

答案 0 :(得分:2)

使用jQuery one的Masonry append方法。 我已在您的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方法中。