JS循环精灵图时，如何动态计算每个小图标的位置偏移量？

Question

在使用JavaScript循环生成精灵图中的小图标时，如何动态计算每个小图标的位置偏移量是一个常见问题。通常，精灵图是由多个小图标拼接而成的大图片，每个小图标在大图中的位置由其行列索引决定。假设精灵图的每个小图标宽度为`iconWidth`，高度为`iconHeight`，且总共有`cols`列。那么对于第`i`个小图标（从0开始计数），其水平偏移量可计算为`(i % cols) * iconWidth`，垂直偏移量为`Math.floor(i / cols) * iconHeight`。通过这种方式，可以确保每个小图标的背景位置正确设置，从而在页面中准确显示对应的图标。此方法需注意图标尺寸一致性及精灵图布局规则，否则可能导致位置计算错误。