每第n个图像具有下一个循环的余数偏移

Every nth image with remainder offset for next loop

本文关键字：循环 余数偏 下一个 图像 每第      更新时间：2023-09-26

我有两个值，它们指示要从某些数据中解析多少结果以及要针对哪个第n项。在这种情况下，它使每第n个项目都成为一个大图像，而其他项目都是正常大小。以下是我需要循环做的：

  • 第一个图像必须很大，或者可以选择打开
  • 最后获取正常大小图像的剩余部分
  • 使用此余数，以便在下一个大图像出现之前，对数据的下一次迭代具有正确的起点

我非常接近，但我的模量错了，或者我是怎么检查的。

var i = 0,
len = productsObj.products.length;
for (i; i < len; i++) {
    if ((i + this.nthProductImageOffset) % NTH_PRODUCT_IS_LARGE_TILE === 0) {
        productsObj.products[i].PhotoSize = 'large';
    } else {
        productsObj.products[i].PhotoSize = 'medium';
    }
}
// Store the remainder of medium tiles, if any, to be calculated
// against the next set of products to be appended.
this.nthProductImageOffset = i % NTH_PRODUCT_IS_LARGE_TILE;

所以，如果我的两个初始值是：NTH_PRODUCT_IS_LARGE_TILE=7productsObj.products.length=30

第一个图像较大，然后每7个图像较大。如果在循环结束时剩下2个中等图像，则需要在下一次运行循环时考虑到这一点，然后再出现另一个大图像。这样，无论第n个数量或迭代次数如何，我们都将始终在大瓷砖之间拥有正确数量的中等瓷砖。

上面代码的问题似乎是您使用了偏移量。您需要将偏移量更新为i的模数+您以前的偏移量。不仅仅是i.

例如：

this.nthProductImageOffset = (i + this.nthProductImageOffset) % NTH_PRODUCT_IS_LARGE_TILE;

下面是一个可视化的jsFiddle示例：https://jsfiddle.net/kwandrews7/6jxsu91y/1/

每次单击"运行"按钮，都会将5个元素添加到列表中。第7个元素将始终是LARGE，而其他元素将是MEDIUM。祝你好运。

html:

<button id="run">Run</button>
<ol id="list">
</ol>

javascript:

var btnAdd = document.getElementById('run');
btnAdd.addEventListener("click", addElement, false);
var offset = 0
function addElement() {
    var olList = document.getElementById('list');
    var newListItem = document.createElement('li');
    newListItem.innerText = 'New Item';
    var len = 5;
    var mod = 7;
    for (var i=0; i<len; i++) {
        var iOffset = i + offset;
        if ( iOffset % mod === 0) {
            var newListItem = document.createElement('li');
            newListItem.innerText = "LARGE: i(" + i + "), offset(" + offset + "), iOffset(" + iOffset + ")";
            olList.appendChild(newListItem);
        } else {
            var newListItem = document.createElement('li');
            newListItem.innerText = "MEDIUM: i(" + i + "), offset(" + offset + "), iOffset(" + iOffset + ")";
            olList.appendChild(newListItem);
        }
    }
    offset = (i+offset) % mod
}

试试这个：

var j = 0;
function run(list) {
    for(var i = 0; i < list.length; i++) {
        if(j % 7 === 0) {
            console.log(list[i] + ' large');
        }
        else {
            console.log(list[i] + ' medium');
        }
        j += 1;
    }
}
run([1, 2, 3]);
run([4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]);
run([16, 17, 18]);

您可以使用j来跟踪所有列表中的项目总数，并将其与NTH_PRODUCT_IS_LARGE_TILE进行核对，这样您就不必关心list.length了。

http://jsfiddle.net/nx3jswyk/

输出：

1 large
2 medium
3 medium
4 medium
5 medium
6 medium
7 medium
8 large
9 medium
10 medium
11 medium
12 medium
13 medium
14 medium
15 large
16 medium
17 medium
18 medium

好的，所以我尝试了您的代码，它只有在初始化nthProductImageOffset时才能工作。只需添加

nthProductImageOffset = 0;

到代码的开头，应该可以使用

相关文章：