Question

我使用JavaScript进行工作，并试图将一些图像添加到网站中。

我在页面上有一个博客文章列表。我有一堆小的独立图像（想像小图标图像），我想将它们放置在博客文章提要的两侧。它们有点像随机背景图像。随着资讯提供时间的延长，将自动放置更多图像。

这是到目前为止我所拥有的一些示例代码。现在，我只是在页面上添加文本以使它正常工作。

我需要帮助弄清楚如何在到达数组末尾时重新启动此循环。例如，在打印6url.jpg之后，如果我的imageCount大于6，我想打印1url.jpg，依此类推。我玩过continue和while循环，但不确定如何实现。

var blogIcons = ["1url.jpg", "2url.jpg", "3url.jpg", "4url.jpg", "5url.jpg", "6url.jpg"];
var blogFeedHeight = $(".blog-feed").height();
var imageDistance = 400; 
// Determining how many images to place based on the blog feed height;
var imageCount = Math.ceil(blogFeedHeight/imageDistance); 
// the number of images that should be inserted.
for(var i = 0; i < imageCount; i++){
    $('blog-feed').append('<div class="blog-icon">' + blogIcons[i] +'</div>')
}

Answer 1

您要寻找的是模，即2个数字的欧几里得除法的其余部分。

var blogIcons = ["1url.jpg", "2url.jpg", "3url.jpg", "4url.jpg", "5url.jpg", "6url.jpg"];
var imageCount = 10;
// the number of images that should be inserted.
for (var i = 0; i < imageCount; i++) {
  console.log(blogIcons[i % blogIcons.length])
}

我简化了您的问题，因此它可以在StackOverflow上运行。但您可以使用“％”来获得正确的索引

所以您的脚本应如下所示：

var blogIcons = ["1url.jpg", "2url.jpg", "3url.jpg", "4url.jpg", "5url.jpg", "6url.jpg"];
var blogFeedHeight = $(".blog-feed").height();
var imageDistance = 400; 
// Determining how many images to place based on the blog feed height;
var imageCount = Math.ceil(blogFeedHeight/imageDistance); 
// the number of images that should be inserted.
for(var i = 0; i < imageCount; i++){
    $('blog-feed').append('<div class="blog-icon">' + blogIcons[i % blogIcons.length] +'</div>')
}

Answer 2

您不需要重新启动一个循环。取而代之的是，您可以使用模除法从数组的范围内提取项目

var blogIcons = ["1url.jpg", "2url.jpg", "3url.jpg", "4url.jpg", "5url.jpg", "6url.jpg"];

for (var i = 0; i < 14; i++) {
  console.log(blogIcons[i % blogIcons.length]);
}

进行i % blogIcons.length时，您会得到一个介于0和blogIcons.length之间的数字

数组结束后重新启动for循环

2 个答案: