Instafeed.js - 当超过 60 张图像时按最喜欢排序

Question

我正在使用 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>

亲切的问候

Answer 1

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

首先您需要执行以下步骤；

调用feed.next()存储数据直到达到1000张图片。 - 从 "after" instafeed 的回调中调用它。
使用相似计数对图像进行排序 - 需要有我们自己的比较功能。
创建模板以显示图像。
最终将数据切片（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>

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

Instafeed.js - 当超过 60 张图像时按最喜欢排序

Instafeed.js - Sortby most-liked when 60+ images

javascript

instafeedjs