0

我有 4 个 div，我想显示 20 个结果，如下所示：

第 1 部分 - 前 5 个提要

Div 2 - 后 5 个供稿（不包括前 5 个）

第 3 部分 - 后 5 个供稿（不包括前 10 个）

第 4 部分 - 后 5 个供稿（不包括前 15 个）

HTML

<ul id="instafeed2" class="instafeed slides"></ul>
<ul id="instafeed3" class="instafeed slides"></ul>
<ul id="instafeed4" class="instafeed slides"></ul>
<ul id="instafeed5" class="instafeed slides"></ul>

JS

var feed = new Instafeed({
        get: 'user',
        userId: userId,
        accessToken: 'accessToken',
        limit:10,
        template: '<li><a href="{{link}}" target="_blank"><img src="{{image}}" /></a></li>',
        resolution: 'standard_resolution',
        target: 'instafeed2',
    });

feed.run();

插件网址： http : //instafeedjs.com/ Instafeed

我能够获取结果但无法拆分它们。

请建议。

4

1 回答 1

4

是的，您可以将提要分成不同的 div。为了实现这一点；

  1. 覆盖成功回调实现，它提供了根据需要控制提要数据的可行性。
  2. 使用所需模板创建提要数据（因为此成功函数返回 JSON）
  3. 对提要数据进行切片并分配给 Divs

在这里找到演示代码

    var imgs = [];
    var feed = new Instafeed({
        get: 'tagged',
        tagName: 'srilanka',
        clientId: '467ede5a6b9b48ae8e03f4e2582aeeb3',
        limit: 20,
        template: '<a href="{{link}}" target="_blank"><img src="{{image}}"/></a>',
        success: function (data) {
            // read the feed data and create owr own data struture.
            var images = data.data;
            var result;
            for (i = 0; i < images.length; i++) {
                var image = images[i];
                result = this._makeTemplate(this.options.template, {
                    model: image,
                    id: image.id,
                    link: image.link,
                    image: image.images[this.options.resolution].url
                });
                imgs.push(result);
            }
            //split the feed into divs
            $("#instafeed2").html(imgs.slice(0, 5));
            $("#instafeed3").html(imgs.slice(5, 10));
            $("#instafeed4").html(imgs.slice(10, 15));
            $("#instafeed5").html(imgs.slice(15, 20));
        }
    });
    feed.run();
    <html>
    <head>
        <title>Example of Instafeed filter data into different divs - Ajith</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script src="http://sriajith.info/wp-content/uploads/2015/05/instafeed.min_.js"></script>
    </head>
    
    <body>
        <p>Div1</p>
        <ul id="instafeed2" class="instafeed slides"></ul>
        <p>Div2</p>
        <ul id="instafeed3" class="instafeed slides"></ul>
        <p>Div3</p>
        <ul id="instafeed4" class="instafeed slides"></ul>
        <p>Div4</p>
        <ul id="instafeed5" class="instafeed slides"></ul>
    </body>
    </html>

于 2015-05-28T15:37:29.077 回答