使用Json从服务器加载所有图像，并将其显示为砌体

Question

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

的HTML

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

杰森

$(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

您几乎是正确的，只是在阅读文档时错过了一小部分，在这里添加元素时需要添加HTML元素并将其传递给砌筑函数。

您正在添加字符串以追加，后来又将元素传递给砌体，同样，此代码-> var str = $（html）; 返回HTML元素而不是字符串的数组，因此您需要将这些元素添加到网格并将其传递给砌体

所以你的零钱是...

  // 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
  }

我也有虚拟小提琴