javascript - 使用 Json 从服务器加载所有图像，并将它们显示为 Masonry

Question

我想做的是从服务器上的文件夹中获取 20 个左右的图像，并使用 masonry.desandro 显示它们，一旦滚动到底部，它将加载另一组 20 个图像。就像pinterest一样。 目前它确实一次加载 20 个图像，我遇到的唯一问题是前 20 个显示 Masonry，但当接下来的 20 个加载时，它们不显示 Masonry

HTML

<div class="grid">
</div>

Json

$(document).ready(function() {

      // The max number of images to be loaded at a time.
      var limit = 16;

      // JSON data will be assigned to this
      var images = "";

      // to remember where in JSON we are
      // initialize to the value of limit - so that we can load in images
      // before page scroll.
      var currentIndex = limit;

      // When there are fewer than `limit` images left, this
      // value will be the difference between the current index
      // and the length of the images array.
      var stop = limit;

      var grid = $(".grid");

      // Make a GET request to the api
      $.getJSON("***********************/newsite/api.php", function(data) {

        // save the data to be used later.
        images = data.weddingCakes;
        console.log(data);
      })

      // create the first round of images.
      .done(function() {
        var html = "";
        for (var i = 0; i < limit; i++) {
          html += '<div class="grid-item"><img src="' + images[i] + '"></div>';
        }
        grid.append(html)

        .masonry({
            gutter: 3,
            itemSelector: '.grid-item',
            animate: true
        });
        console.log("masonry")
      })
      .error(function() {
          console.log("error");
      });

      $(document).scroll(function() {
        // get the scoll position with support for IE
        // see http://jsbin.com/egegu3/6/edit?html,js,output
        // for original code.
        var totalHeight, currentScroll, visibleHeight;
        if (document.documentElement.scrollTop) {
          currentScroll = document.documentElement.scrollTop;
        } else {
          currentScroll = document.body.scrollTop;
        }
        totalHeight = document.body.offsetHeight;
        visibleHeight = document.documentElement.clientHeight;

        // only load more images if the scroll bar is at the bottom
        $(window).scroll(function() {
            if($(window).scrollTop() + $(window).height() == $(document).height()) {
              var diff = images.length - currentIndex;
              // if the difference is > 0 then there are more images in the array
              if (diff > 0) {
                stop = diff > limit ? limit : diff;
                getImages(currentIndex, stop);
                currentIndex += stop;
              }

              // otherwise, reset the index before calling getImages()
              else {
                currentIndex = 0;
                stop = diff > limit ? limit : diff;
                getImages(currentIndex, stop);
                currentIndex += stop;
              }
            }
        });
      });

      // gets the path for each image from index to stop
      function getImages(index, stop) {
        var html = "";

        // create the img tags.
        for (var i = index; i < index + stop; i++) {
          html += '<div class="grid-item"><img src="' + images[i] + '"></div>';
        }
        var str = $(html);
        grid.append(html).masonry("appended", str); 
      }
    });

我的JSfiddle

Answer 1

你几乎是正确的，只是在阅读documentation时漏掉了一小部分。 ，在这里附加元素时，您需要附加 HTML 元素并将其传递给砌体函数。

您正在添加要追加的字符串，然后您将元素传递给砌体，还有此代码 -> var str = $(html);返回 HTML 元素数组而不是字符串，因此您需要将这些元素添加到网格并将其传递给 masonry

所以你的小改变将是......

  // gets the path for each image from index to stop
  function getImages(index, stop) {
    var html = "";

    // create the img tags.
    for (var i = index; i < index + stop; i++) {
      html += '<div class="grid-item"><img src="' + images[i] + '"></div>';
    }
    var str = $(html);
    grid.append(str).masonry("appended", str); // This line is a change
  }

我有dummy fiddle也为了这个