gpt4 book ai didi

javascript - Instafeed 将数据过滤到不同的 div 中

转载 作者:行者123 更新时间:2023-11-28 15:24:29 27 4
gpt4 key购买 nike

我有 4 个 div,我想显示 20 个结果,如下所示:

Div 1 - 前 5 个提要

Div 2 - 接下来 5 个提要(不包括前 5 个)

第 3 部分 - 接下来 5 个 Feed(不包括前 10 个)

第 4 部分 - 接下来 5 个 Feed(不包括前 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

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

请提出建议。

最佳答案

是的,您可以将 feed 分成不同的 div。为了实现这一目标;

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

查找demo code here

    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>

关于javascript - Instafeed 将数据过滤到不同的 div 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29664464/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com