PHP嵌套for循环定位图标精灵

Question

我正在尝试自动设置100个图标。我有一个图像精灵，尺寸为320px x 320px，包含100个图标，每个图标为32px x 32px。我想要实现的是有一个php循环，我可以复制图标div代码100次，但在该循环内，使用其他循环来定位图像精灵的背景。我需要做的是，将x坐标增加32像素，从0到-288前10,y坐标将为0。然后再次从0到-288重复x代码，但增加y坐标32px，依此类推。所以对于每行10个图标，x坐标每次增加32px，然后重置为0,y坐标每10个图标增加一次，直到总共达到100个图标。我有下面的代码，成功地循环100个图标总数，但不能得到嵌套循环工作。希望这能说得通。如有任何帮助，不胜感激。

<?php
   for ($i=1; $i<=100; $i++) { ?>
   <div id="menu_icon_edit_cont">
      <div class="menu_icons" style="background-position: -<?= (x coordinate here) ?>px -<?= (y coordinate here) ?>px">
      </div>
   </div>
<? } ?>

Answer 1

有很多方法可以做到这一点，您应该选择您认为最容易阅读和维护的方法。

新手经常犯的一个错误是假设他们的for循环需要完全模仿他们想要做的事情(你想要100个图标，所以你假设你应该从1迭代到100)。

你真正想要的是最终产品，例如:

    for ($y = 0; $y < 320; $y += 32) {
        for ($x = 0; $x > -320; $x -= 32) {
            //output your html using $x/$y
        }
    }

按照你发布的路线，尽管它可能看起来像:

    for($i=0;$i<100;$i++){
        $x = $i%10 * -32;
        $y = floor($i/10)*32;
        //output your html using $x/$y
    }

我更喜欢第一种方式，因为它更清楚地表明它到底要做什么。

Answer 2

您可以很容易地将单个迭代器$i"转换"为坐标:$y = floor($i/10); $x = $i%10;。然后，只需乘以图像的宽度(在本例中为32)，就完成了。