Question

我的目标是调用一个返回JSON数据的API。在成功检索数据后，我想将检索到的图像放入一个用Masonry库组织的图库中。这应该适用于最初加载数据，并且当用户向下滚动页面时无限滚动以加载更多数据。

以下代码适用于抓取和组织第一组数据。它加载九个图像并使用Masonry来组织它们。但是，当我向下滚动页面以加载更多图像时，所有当前图像都会被压缩到页面上。当我再次向下滚动时，同样的事情发生了。所以我最终在页面顶部有一堆空白区域。

我试图大致按照我在这里找到的例子;

感谢您提供的任何帮助。

function loadThumbnailImages(thumbDate) {

// Format the date into YYYY-mm-dd format for the API
formattedDate = this.formatDate(thumbDate);

$.jsonp({
// The URL to parse the JSON from
url: 'dataURLGoesHere' + formattedDate, // any JSON endpoint
// if URL above supports CORS (optional)
corsSupport: false,
// if URL above supports JSONP (optional)
jsonpSupport: false,

// If the JSON from the URL was successfully parsed
success: function(data){
  $(document).ready(function() {
    if(data.media_type == "image")
    {        
      var item = '<div class="masonry-item"><a href="#" class="thumbnail" align="middle" style="max-height: 350px; max-width: 350px;"><img src=' + data.url + ' class="thumbImage img-responsive"/></a></div>';
      items += item;

      if(doneLoading)
      {

        var $container = $('#masonry-list').masonry({
          itemSelector: '.masonry-item',
          columnWidth: 50
        })

        $container.append(items);

        $container.imagesLoaded().progress( function ( imgLoad, image) {
          var $item = $(image.img).parents('.masonry-item');
          $container.masonry('appended', $item);
        });

        items = "";
      }
    }
  })
}

Answer 1

我设法搞清楚了。添加两行$ container.masonry（'reloadItems'）和$ container.masonry（'layout'）设法加载图像并相应地将它们放在正确的位置。希望这可以帮助将来的某个人！

        var $container = $('#masonry-list').masonry({
          itemSelector: '.masonry-item',
          columnWidth: 50
        })

        $container.append(items);

        $container.imagesLoaded().progress( function ( imgLoad, image) {
          var $item = $(image.img).parents('.masonry-item');
          $container.masonry('appended', $item);
          $container.masonry('reloadItems'); //<--- This line and 
          $container.masonry('layout'); //<-------- This line fixed the problem
        });

JSON的砌体图像组织

1 个答案: