Question

What I'm trying to do is get 20 or so images from a folder on the server and display them using masonry.desandro and once scrolled to the bottom it will load another set of 20 images. Just like pinterest. Currently it does load the images 20 at a time, the only problem I'm having is the first 20 display Masonry but when the next 20 load they aren't displaying 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); 
      }
    });

My JSfiddle

Answer 1

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

您正在添加要附加的字符串，稍后您将元素传递给砌体，此代码 - ＆gt; 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
  }

我也有dummy fiddle

Using Json to load all images from server, and displaying them Masonry

1 个答案: