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

Question

我有两个值，指示要从某些数据中解析多少结果以及我要定位的第 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 = 7 productsObj.products.length = 30

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

Answer 1

试试这个：

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

Answer 2

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

nthProductImageOffset = 0;

到你的代码的开头，你应该可以开始了

Answer 3

上面代码的问题似乎是您对偏移量的使用。您需要将偏移量更新为 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

}

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

Every nth image with remainder offset for next loop

javascript

loops

modulus