我有 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。为了实现这一目标；
- 覆盖成功回调实现，它提供了根据我们的需要控制 Feed 数据的可行性。
- 使用所需模板创建提要数据(因为此成功函数返回 JSON)
- 对 Feed 数据进行切片并分配给 Div
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/