砌体ajax负载无法正常工作答案

【问题标题】：Masonry ajax load doesn't work correct砌体ajax负载无法正常工作
【发布时间】：2015-11-19 15:33:12
【问题描述】：

所有图片均由 ajax 加载。有时它工作得很好，但通常它不能正常工作 - 看看screen，所有图像都相互重叠。我的错在哪里？当我解决这个问题时，我将重构这段代码:)。后端：Ruby on Rails。

js：

$( document ).ready(function() {
  (function() {
    $.ajax({
      url: '/photos?page=' + 1,
      type: 'get',
      dataType: 'script',
      success: function(data) {
        var $container = $('#photo-container');
        var items = JSON.parse(data);

        items.forEach(function(item) {
          var img = $('<img src="' + item.image.url + '" />');
          var elem = $('<div class="grid__item"><img src="' + item.image.url + '" /></div>');
          $container.append(elem);
        });

        initMasonry();
        initInfiniteScroll();
      }
    });
  }());
});

function initMasonry() {
  var $container = $('#photo-container');

  $container.masonry({
    gutter: 20,
    itemSelector: '.grid__item',
    columnWidth: 300
  });
}

function initInfiniteScroll() {
  var page = 1,
    loading = false;

  function nearBottomOfPage() {
    return $(window).scrollTop() > $(document).height() - $(window).height() - 200;
  }

  $(window).scroll(function(){
    if (loading) {
      return;
    }

    if(nearBottomOfPage()) {
      loading=true;
      page++;
      $.ajax({
        url: '/photos?page=' + page,
        type: 'get',
        dataType: 'script',
        success: function(data) {
          var $container = $('#photo-container');
          var arr = JSON.parse(data);

          arr.forEach(function(item) {
            var img = $('<img src="' + item.image.url + '" />');
            var elem = $('<div class="grid__item"><img src="' + item.image.url + '" /></div>');

            $container.imagesLoaded(function() {
              $container.append(elem).masonry('appended', elem, true).masonry('reloadItems');
            });
          });

          loading=false;
        }
      });
    }
  });
}

【问题讨论】：

标签： javascript jquery ajax jquery-masonry masonry

【解决方案1】：

我认为您需要在每个 ajax 之后“重新初始化”它。你可以使用 $.ajaxConplete()

【讨论】：

【解决方案2】：

success: function(data) {
  var $container = $('#photo-container');
  var arr = JSON.parse(data);
  var fragment = document.createDocumentFragment();
  var elems = [];

  elems = arr.map(function(item) {
    var $elem = $('<div class="grid__item"><img src="' + item.image.url + '" /></div>');
    $elem.hide();
    // get DOM element, not jQuery
    var elem = $elem[0]
    // add element, not jQuery, to fragment
    fragment.appendChild( elem );
    return elem
  });
  // append elems to container
  $container.append( fragment );

  $container.imagesLoaded(function() {
    // show items once all visible
    $( elems ).show();
    $container.masonry( 'appended', elems )
  });

  loading=false;
}

【讨论】：