Question

有兴趣拍摄图片库（简单的伸缩框），并希望jquery（或替代项）重复使用所使用的图像，直到填满整个图片库为止，类似于CSS中的背景图片重复。

有没有一种方法可以减轻负载并简化实现？图片尺寸很小，并且希望它们也是可点击的链接。

在执行此操作时找不到很好的信息，或者可能找不到错误的信息……很多无限的滚动画廊和幻灯片。

谢谢！

编辑：根据我的评论进行澄清：

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

我从哪里开始？我需要寻找更好的关键字吗？我发现的所有查找信息的内容都与您链接的插件类似，可以调整图像大小。”

Answer 1

您似乎还没有尝试，所以我不确定您的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>

重复图库中的图像，直到填满div

1 个答案: