Question

以下列格式以编程方式编写多行HTML的最佳方法是什么：

<div class="grid-item"> <img src="gifs/image-GLITCH.gif" alt="image-GLITCH"/> </div>
<div class="grid-item"> <img src="gifs/image.gif" 
alt="image"/> </div>
<div class="grid-item"> <img src="gifs/image-GLITCH.gif" 
alt="image-GLITCH"/> </div>

最终结果是一个GIF网格，其中中心列包含普通图像，而左右列包含图像的“GLITCH”版本。

所需的最终结果：以下许多行： https://i.stack.imgur.com/nG08z.jpg

我曾考虑使用像：

这样的PHP

$images = glob("gifs/*.gif}");
foreach($images as $image) {
echo <div class="grid-item"> <img src=$image alt=""/> </div>
}

请注意，以上不是我会使用的确切php，我不知道如何用glob排除搜索字符串（我相信你做不到）。但这个问题是要问：

“以编程方式编写html以创建附加图像中包含的图像网格的最佳方式是什么。” [这个问题不是关于要编写的实际代码，而是应该使用什么方法编写代码：javascript？ PHP？]

Answer 1

您是否正在使用javascript解决方案？

(function($) {
    var imageUrl = "gifs/image.gif";

    var markup = glitichify(imageUrl);

    $(markup).appendTo($elementToAppendThisTo);

    function glitichify(imageUrl) {
        var imageUrlParts = imageUrl.split(".");
        var glitchImageUrl = imageUrlParts[0] + "-GLITCH" + imageUrlParts[1];
        var imageUrls = [glitchImageUrl, imageUrl, glitchImageUrl];

        var imageMarkup = imageUrls.map(function(imageUrl, index) {
            return '<div class="grid-item"> <img src="' + imageUrl + '" alt="image"/> </div>';
        });

        return imageMarkup.join("");
    }
})(jQuery);

Answer 2

最好的方法是使用PHP（或不同的服务器端语言）。就此而言，你可以完全取消 glob() ;你不想根据你有多少张图片输出，你想输出固定数量的图像，以便结果以你想要的模式。

首先，让我们看看您的原始HTML：

＆＃13;

<div class="grid-item">
  <img src="gifs/image-GLITCH.gif" alt="image-GLITCH" />
</div>
<div class="grid-item">
  <img src="gifs/image.gif" alt="image" />
</div>
<div class="grid-item">
  <img src="gifs/image-GLITCH.gif" alt="image-GLITCH" />
</div>

＆＃13;

每隔一行交替出现。唯一的区别是<img> src和alt。

现在让我们说你总共有33个（从故障开始到故障结束），给出一个很好的＆＃39;数。使用 modulo 在PHP循环中设置非常简单。您需要做的就是检查循环中的变量是否除以所需的＆＃39;毛刺插入＆＃39; offset（我的例子中的每一个图像）都有一个或不是：

<?php

$image_count = 33;
for ($i = 0; $i < $image_count; $i++) {
    if ($i % 2 == 0) {
        echo '<div class="grid-item"><img src="gifs/image-GLITCH.gif" alt="image-GLITCH"/></div>' . PHP_EOL;
    } else {
        echo '<div class="grid-item"><img src="gifs/image.gif" alt="image"/></div>' . PHP_EOL;
    }
}

现在您可以正确输出所有图像，就像上面的HTML代码段一样。

另外，请勿忘记字符串周围的引号！

可以看到工作here：

<div class="grid-item"><img src="gifs/image-GLITCH.gif" alt="image-GLITCH"/></div>
<div class="grid-item"><img src="gifs/image.gif" alt="image"/></div>
<div class="grid-item"><img src="gifs/image-GLITCH.gif" alt="image-GLITCH"/></div>
...

Answer 3

如果您不使用像React或Vue这样的UI框架而没有像pug这样的html引擎来生成循环中的img标记，那么可以使用js来完成。至少你得到图像的地方很重要。如果你想从你的本地文件夹中动态包含你的图像，你应该编写一个服务器端脚本来获取你的图像数组，然后你可以将它传递给js或者像你的服务器端lang一样使用它。

＆＃13;

var data = ['https://picsum.photos/300?random', 'https://picsum.photos/300?random', 'https://picsum.photos/300?random'],
    section = document.querySelector('section');

for (var i = 0; i < data.length; i++) {
  var img = document.createElement('img');
  img.src = data[i];
  section.appendChild(img);
}

＆＃13;

section {
  border: 1px solid #000;
  min-width: 50px;
  min-height: 50px;
}

＆＃13;

<section></section>

＆＃13;

以编程方式编写HTML的最佳方式

3 个答案: