重复图库中的图像，直到div填满为止
重复图库中的图像，直到div填满为止
提问于 2018-10-10 04:14:15
对使用图片库(简单的flex box)感兴趣，并且想要jquery (或者替代？)重复使用的图像，直到填充完整个图库，类似于CSS中的背景图像重复。
有没有一种方法可以做到这一点:负载轻，实现简单？图像大小相当小，也希望它们是可点击的链接。
没有找到关于这样做的大量信息，或者可能搜索了错误的东西...有很多无限的卷轴画廊和幻灯片。
谢谢!
编辑:来自我的评论，以澄清：
“如果我的图库是1000px x 1000px，我应该能够容纳16张250px x 250px的图像，对吗?如果我只有12张图像，我想通过复制4张图像来自动填充额外的空间。
我该从哪里开始呢？有没有我需要寻找的更好的关键字？我找到的所有信息都会弹出一些与你链接的插件类似的东西，调整图像的大小。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-10-10 06:55:34
您似乎还没有尝试过，所以我不确定您的HTML布局是什么，也不确定您的图像数据是如何定义的。
如果您的图像已经存在于您的HTML布局中，您可以根据需要使用clone现有元素来填充您的容器：
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52728662
复制相关文章
相似问题