Javascript 将图像附加到砌体网格中

我的Js非常有限，所以不要因为下面的任何错误而向我开枪

我试图将一些本地存储的图像附加到一个砖石网格中

当前，当我单击append按钮时，它多次只添加数组中的最后一个图像

我想做的是，每次点击按钮，添加接下来的7张图片

$（文档）.ready（函数（）{
var$container=$（'.templates'）；
$container.imagesLoaded（函数（）{
$container.com({
itemSelector:“.grid项”，
排水沟：12，
isFitWidth:正确
});
});
//点击功能
$（“#附加按钮”）。单击（函数（）{
var$items=getItems（）；
//默认情况下隐藏
$items.hide（）；
//附加到容器
$container.append（$items）；
$items.imagesLoaded（）.progress（函数（imgLoad，图像）{
//获取项目
//图像是imagesLoaded类，而不是'；
}
退货项目；
}
函数getItems（）{
var项目=“”；
对于（变量i=0；i<7；i++）{
items+=getItem（）；
}
//返回jQuery对象
返回$（项目）；
}

.templates{
位置：相对位置；
保证金：0自动；
宽度：100%；
}
.img模板{
宽度：100%；
显示：块；
高度：自动；
}
.表格项目{
宽度：20%；
填充：12px；
边缘底部：12px；
边框：实心1px#666；
}
#附加按钮{
位置：绝对位置；
底部：0；
左：50%；
转化：translateX（-50%）；
}

附加新项目

//图像数组 函数getItem（）{ 对于（变量i=0；i<$images.length；i++）{ var项目=“”+“”； } 退货项目； } 函数getItems（）{ var项目=“”； 对于（变量i=0；i<7；i++）{ items+=getItem（）； } //返回jQuery对象 返回$（项目）； } 每次调用getItem（）时，都会重新开始for循环，因为您在循环中重写了item var，所以得到的是上一个映像的7倍

有很多方法可以解决这个问题。最简单的方法可能是展开一个for循环，然后将所有内容粘贴到同一个函数中

function getItems() {
  var items = '';
  var $images = ['appply.jpg', 'athena.jpg', 'biz-dev-theme-responsive.jpg', 'boutique-woocommecre-theme.jpg', 'box-grid-theme-responsive.jpg', 'buro.jpg', 'circles-theme-responsive.jpg', 'deliciousmagazine.jpg', 'eshop-woocommerce-theme.jpg', 'fashion-style-wordpress-theme.jpg', 'forthecause.jpg', 'freelancer-theme-responsive.jpg', 'full-slider-theme-responsive.jpg', 'illustration-responsive-theme.jpg', 'large-grid-woocommerce-theme.jpg', 'maximize.jpg', 'olya.jpg', 'panoramic-theme-responsive.jpg', 'peddlar.jpg', 'pixelpress.jpg', 'resort.jpg', 'right-folio-theme-wordpress.jpg', 'sell-woocommerce-wordpress.jpg', 'sentient.jpg', 'shelflife.jpg', 'side-folio-theme-responsive.jpg', 'slider-scroll-wordpress.jpg', 'sliding.jpg', 'startup-responsive-theme.jpg', 'stitched.jpg', 'superstore.jpg', 'theonepager.jpg', 'upstart.jpg', 'vector-theme-responsive.jpg', 'videographer-responsive-theme.jpg', 'function.jpg', 'hub.jpg', 'memorable.jpg'];   
  for (var i = 0; i < $images.length; i++) {
    var items += '<div class="grid-item">' + '<img src="/includes/images/wordpress/gallery/' + $images[i] + '" /></div>';
  }
  // return jQuery object
  return $(items);
}

函数getItems（）{ var项目=“”； var$images=['appply.jpg'、'athena.jpg'、'biz dev theme responsive.jpg'、'Finiter Woocomecre theme.jpg'、'box grid theme responsive.jpg'、'buro.jpg'、'circles theme responsive.jpg'、'deliciousmagazine.jpg'、'eshop woocommerce theme.jpg'、'fashion style wordpress theme.jpg'、'forthecause.jpg'、'Freedor theme Responsi。jpg“，”插图响应主题.jpg“，”大网格woocommerce主题.jpg“，”最大化.jpg“，”olya.jpg“，”全景响应主题.jpg“，”peddlar.jpg“，”pixelpress.jpg“，”resort.jpg“，”右对开本主题wordpress.jpg“，”sell woocommerce WoodPress wordpress.jpg“，”Senient.jpg“，”shelflife.jpg“，”侧对开本主题响应.jpg“，”slider.jpg、.jpg、.slide.jpg、.startup responsive theme.jpg、.sthed.jpg、.superstore.jpg、.theonepager.jpg、.upstart.jpg、.vector theme responsive.jpg、.videographer responsive theme.jpg、.function.jpg、.hub.jpg、.epg、.justible.jpg]； 对于（变量i=0；i<$images.length；i++）{ var项目+=''+''； } //返回jQuery对象 返回$（项目）； }

//图像数组
函数getItem（）{
对于（变量i=0；i<$images.length；i++）{
var项目=“”+“”；
}
退货项目；
}
函数getItems（）{
var项目=“”；
对于（变量i=0；i<7；i++）{
items+=getItem（）；
}
//返回jQuery对象
返回$（项目）；
}

每次调用getItem（）时，都会重新开始for循环，因为您在循环中重写了item var，所以得到的是上一个映像的7倍

有很多方法可以解决这个问题。最简单的方法可能是展开一个for循环，然后将所有内容粘贴到同一个函数中

function getItems() {
  var items = '';
  var $images = ['appply.jpg', 'athena.jpg', 'biz-dev-theme-responsive.jpg', 'boutique-woocommecre-theme.jpg', 'box-grid-theme-responsive.jpg', 'buro.jpg', 'circles-theme-responsive.jpg', 'deliciousmagazine.jpg', 'eshop-woocommerce-theme.jpg', 'fashion-style-wordpress-theme.jpg', 'forthecause.jpg', 'freelancer-theme-responsive.jpg', 'full-slider-theme-responsive.jpg', 'illustration-responsive-theme.jpg', 'large-grid-woocommerce-theme.jpg', 'maximize.jpg', 'olya.jpg', 'panoramic-theme-responsive.jpg', 'peddlar.jpg', 'pixelpress.jpg', 'resort.jpg', 'right-folio-theme-wordpress.jpg', 'sell-woocommerce-wordpress.jpg', 'sentient.jpg', 'shelflife.jpg', 'side-folio-theme-responsive.jpg', 'slider-scroll-wordpress.jpg', 'sliding.jpg', 'startup-responsive-theme.jpg', 'stitched.jpg', 'superstore.jpg', 'theonepager.jpg', 'upstart.jpg', 'vector-theme-responsive.jpg', 'videographer-responsive-theme.jpg', 'function.jpg', 'hub.jpg', 'memorable.jpg'];   
  for (var i = 0; i < $images.length; i++) {
    var items += '<div class="grid-item">' + '<img src="/includes/images/wordpress/gallery/' + $images[i] + '" /></div>';
  }
  // return jQuery object
  return $(items);
}

函数getItems（）{ var项目=“”； var$images=['appply.jpg'、'athena.jpg'、'biz dev theme responsive.jpg'、'Finiter Woocomecre theme.jpg'、'box grid theme responsive.jpg'、'buro.jpg'、'circles theme responsive.jpg'、'deliciousmagazine.jpg'、'eshop woocommerce theme.jpg'、'fashion style wordpress theme.jpg'、'forthecause.jpg'、'Freedor theme Responsi。jpg“，”插图响应主题.jpg“，”大网格woocommerce主题.jpg“，”最大化.jpg“，”olya.jpg“，”全景响应主题.jpg“，”peddlar.jpg“，”pixelpress.jpg“，”resort.jpg“，”右对开本主题wordpress.jpg“，”sell woocommerce WoodPress wordpress.jpg“，”Senient.jpg“，”shelflife.jpg“，”侧对开本主题响应.jpg“，”slider.jpg、.jpg、.slide.jpg、.startup responsive theme.jpg、.sthed.jpg、.superstore.jpg、.theonepager.jpg、.upstart.jpg、.vector theme responsive.jpg、.videographer responsive theme.jpg、.function.jpg、.hub.jpg、.epg、.justible.jpg]； 对于（变量i=0；i<$images.length；i++）{ var项目+=''+''； } //返回jQuery对象 返回$（项目）； } 闭包中有$images，这意味着每次调用getItem时，都会创建相同的images实例并进行迭代。结果总是返回最后的项

我修改了您的主要函数getItems以读取$images（移动到函数外部）。并使用splice方法从数组中删除最后7个图像，map生成字符串，reduce合并所有字符串

$（文档）.ready（函数（）{
var$container=$（'.templates'）；
$container.imagesLoaded（函数（）{
$container.com({
itemSelector:“.grid项”，
排水沟：12，
isFitWidth:正确
});
});
//点击功能
$（“#附加按钮”）。单击（函数（）{
var$items=getItems（）；
//默认情况下隐藏
$items.hide（）；
//附加到容器
$container.append（$items）；
$items.imagesLoaded（）.progress（函数（imgLoad，图像）{
//获取项目
//图像是imagesLoaded类，而不是'；
}
函数concat（elem1，