在图库中重复图像，直到填写 div

Question

有兴趣使用图像库(简单的弹性框(，并希望jquery(或替代？(重复使用的图像，直到整个图库被填满，类似于CSS中的背景图像重复。

有没有一种方法可以做到这一点，负载轻，实现简单？图像尺寸非常小，也希望它们是可点击的链接。

找不到有关执行此操作的重要信息，或者可能搜索错误的东西......许多无限的滚动画廊和幻灯片。

谢谢！

---

编辑：从我的评论中澄清：

"如果我的画廊是 1000px x 1000px，我应该能够容纳 16 个 250px x 250px 的图像，是吗？如果我只有 12 张图像，我想通过复制其中 4 张图像来自动填充额外的空间。

我从哪里开始呢？我需要寻找更好的关键字吗？我找到的所有查找信息都会拉出类似于您链接的插件的东西，调整图像大小。

Answer 1

看来您还没有尝试过，所以我不确定您的 HTML 布局是什么或您的图像数据是如何定义的。

如果 HTML 布局中已存在图像，则可以根据需要克隆现有元素以填充容器：

var $container = jQuery('#container');
var $images = jQuery('span', $container);
var total_images = 16;
if ($images.length > 0 && $images.length < total_images) {
for (var i = $images.length; i < total_images; i++) {
var image_index = i % $images.length;
$images.eq(image_index).clone().appendTo($container);
}
}

body {
margin: 0;
background-color: Gray;
}
#container {
width: 180px;
height: 180px;
padding: 10px;
background-color: white;
margin: 0 auto;
display: flex;
align-content: flex-start;
flex-wrap: wrap;
}
#container span {
flex: 0 0 25%;
}
#container img {
display: block;
max-width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<span><img src="https://picsum.photos/250/250/?image=1080" alt=""></span>
<span><img src="https://picsum.photos/250/250/?image=1081" alt=""></span>
<span><img src="https://picsum.photos/250/250/?image=1082" alt=""></span>
<span><img src="https://picsum.photos/250/250/?image=1083" alt=""></span>
<span><img src="https://picsum.photos/250/250/?image=1084" alt=""></span>
<span><img src="https://picsum.photos/250/250/?image=1075" alt=""></span>
<span><img src="https://picsum.photos/250/250/?image=1076" alt=""></span>
</div>

如果您使用 JavaScript 动态地向页面添加图像，例如从 AJAX 调用中，您可以继续循环浏览和插入图像，直到达到所需的数量：

var total_images = 16;
var $container = jQuery('#container');
var images = [
'https://picsum.photos/250/250/?image=1080',
'https://picsum.photos/250/250/?image=1081',
'https://picsum.photos/250/250/?image=1082',
'https://picsum.photos/250/250/?image=1083',
'https://picsum.photos/250/250/?image=1084'
];
for (var i = 0; i < total_images; i++) {
var image_index = i % images.length;
jQuery('<img>', {
'src': images[image_index]
}).wrap('<span>').parent().appendTo($container);
}

body {
margin: 0;
background-color: Gray;
}
#container {
width: 180px;
height: 180px;
padding: 10px;
background-color: white;
margin: 0 auto;
display: flex;
align-content: flex-start;
flex-wrap: wrap;
}
#container span {
flex: 0 0 25%;
}
#container img {
display: block;
max-width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"></div>