0

我正在使用 instafeed.js 在我的主页上显示 Instagram 图片。

我有 1000 多张图像，我想按最喜欢的方式排序，一次加载 60 张。

当我使用“sortBy: most-liked”时，看起来 instafeed.js 会加载 60 张最近的图像，然后按最喜欢的方式对这 60 张进行排序。当我加载接下来的 60 张图片时，我会得到接下来的 60 张最近的图片，这些图片按最喜欢的排序。

似乎不可能按最喜欢的方式对所有 1000 多张图像进行排序。然后一次加载60个？

这是 instafeed.js 的工作原理吗？或者它是一个错误？

 <script type="text/javascript">
  var feed = new Instafeed({
   sortBy: 'most-liked',
    get: 'tagged',
   tagName: 'awesome',
   clientId: 'YOUR_CLIENT_ID'
  });
 feed.run();
</script>

亲切的问候

4

1 回答 1

0

据我所知，目前 instafeed 最多支持加载 60 张图片。但是有一种方法可以加载更多图像并根据您的要求显示它们，并且需要一点代码工作。

首先，您需要按照以下步骤操作；

  1. 调用 feed.next() 存储数据，直到达到 1000 张图像。- 从 instafeed 的“之后”回调中调用它。
  2. 使用类似计数对图像进行排序 - 需要有我们自己的比较功能。
  3. 创建模板以显示图像。
  4. 最后将数据切片（1000 个中的 60 个）并显示在 Div 中。

var nextButton = document.getElementById('next-feeds');
    var imgs = [];							// store the images for caching
    var images = [];
    var currentPage = 1;

    var feed = new Instafeed({
        get: 'tagged',
        tagName: 'ajith',
        clientId: '467ede5a6b9b48ae8e03f4e2582aeeb3',
        resolution: 'thumbnail',
        limit: 60,
        mock: true,
        template: '<a href="{{link}}" target="_blank"><img src="{{image}}" class="instagramImg"/></a><label>Liked by <b>{{model.likes.count}}</b> people</label>',
        cachedNext: function () { 	// read the cached instagram data
            var nextImages = imgs.slice((currentPage - 1) * feed.options.limit, (currentPage) * feed.options.limit);
            $("#instafeed").html(nextImages);
        },
        after: function () {
            if (images.length < 300)
            {
                feed.next();
            }
            else
            {
                var result;
                images.sort(compare);
                for (i = 0; i < images.length; i++) {
                    image = images[i];
                    result = this._makeTemplate(this.options.template, {
                        model: image,
                        id: image.id,
                        link: image.link,
                        image: image.images[this.options.resolution].url,
                        likeCount: image.likes.count
                    });
                    imgs.push(result);
                }
                var imgsPerPage = imgs.slice((currentPage - 1) * feed.options.limit, (currentPage) * feed.options.limit);
                $("#instafeed").html(imgsPerPage);
            }
        },
        success: function (data) {
            images.push.apply(images, data.data);
        }
    });

    feed.run();

    // bind the next button
    nextButton.addEventListener('click', function () {
        $("#instafeed").fadeOut(100);
        $("#instafeed").empty();
        $("#instafeed").fadeIn(100);
        currentPage++;

        feed.options.cachedNext();
    });

    function compare(a, b) {
        // alert(a.likes.count);
        if (a.likes.count < b.likes.count)
            return -1;
        if (a.likes.count > b.likes.count)
            return 1;
        return 0;
    }
<script src="http://sriajith.info/wp-content/uploads/2015/05/instafeed.min_.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="instaFeedButton">
<button id="next-feeds" class="btn-feed">Next</button>
</div>
<br/> <br/>                
<div id="instafeed" class="instagramFeed"></div>

如果你想添加分页，你可以在这里找到一些信息

于 2015-06-27T16:05:18.677 回答