Question

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

我试图将一些本地存储的图像附加到砌体网格中。

目前，当我点击追加按钮时，它只会多次添加我阵列中的最后一张图片。

我尝试做的是每按一下按钮就会添加下7张图片。

＆＃13;

$(document).ready(function() {
  var $container = $('.templates');

  $container.imagesLoaded(function() {
    $container.masonry({
      itemSelector: '.grid-item',
      gutter: 12,
      isFitWidth: true
    });
  });


// Click Function

  $('#append-button').click(function() {
    var $items = getItems();

    // hide by default
    $items.hide();

    // append to container
    $container.append($items);
    $items.imagesLoaded().progress(function(imgLoad, image) {

      // get item
      // image is imagesLoaded class, not <img>
      // <img> is image.img
      var $item = $(image.img).parents('.grid-item');

      // un-hide item
      $item.show();
      // masonry does its thing

      $container.masonry('appended', $item);
    });
  });

});

// Images Array
function getItem() {
  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 item = '<div class="grid-item">' + '<img src="/includes/images/wordpress/gallery/' + $images[i] + '" /></div>';
  }
  return item;
}

function getItems() {
  var items = '';
  for (var i = 0; i < 7; i++) {
    items += getItem();
  }
  // return jQuery object
  return $(items);
}

＆＃13;

.templates {
  position: relative;
  margin: 0 auto;
  width: 100%;
}
.templates img {
  width: 100%;
  display: block;
  height: auto;
}
.grid-item {
  width: 20%;
  padding: 12px;
  margin-bottom: 12px;
  border: solid 1px #666;
}
#append-button {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.1.8/imagesloaded.pkgd.min.js"></script>
<div class="templates">
  <div class="grid-item">
    <img src="http://lorempixel.com/output/people-q-c-319-264-9.jpg" alt="">
  </div>
</div>

<p>
  <button id="append-button">Append new items</button>
</p>

＆＃13;

Answer 1

在闭包中有 $ images 这意味着每次调用 getItem 时都会创建相同的图像实例并进行迭代。结果总是返回最后的项目。

我修改你的主要功能 getItems 来读取$ images（在函数外移动）。并使用拼接方法从数组中删除最后7个图像，映射以生成字符串，并使用 reduce 来连接所有字符串。< / p>

$(document).ready(function() {
  var $container = $('.templates');

  $container.imagesLoaded(function() {
    $container.masonry({
      itemSelector: '.grid-item',
      gutter: 12,
      isFitWidth: true
    });
  });


// Click Function

  $('#append-button').click(function() {
    var $items = getItems();

    // hide by default
    $items.hide();

    // append to container
    $container.append($items);
    $items.imagesLoaded().progress(function(imgLoad, image) {

      // get item
      // image is imagesLoaded class, not <img>
      // <img> is image.img
      var $item = $(image.img).parents('.grid-item');

      // un-hide item
      $item.show();
      // masonry does its thing

      $container.masonry('appended', $item);
    });
  });

});

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'];
// Images Array
function getItem(image) {
    return '<div class="grid-item">' + '<img src="/includes/images/wordpress/gallery/' + image + '" /></div>';
}

function concat(elem1, elem2) {
  return elem1+elem2;
}

function getItems() {
  var items = $images
          .splice(0,7)
          .map(getItem)
          .reduce(concat);
  
  return $(items);
}

.templates {
  position: relative;
  margin: 0 auto;
  width: 100%;
}
.templates img {
  width: 100%;
  display: block;
  height: auto;
}
.grid-item {
  width: 20%;
  padding: 12px;
  margin-bottom: 12px;
  border: solid 1px #666;
}
#append-button {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.1.8/imagesloaded.pkgd.min.js"></script>
<div class="templates">
  <div class="grid-item">
    <img src="http://lorempixel.com/output/people-q-c-319-264-9.jpg" alt="">
  </div>
</div>

<p>
  <button id="append-button">Append new items</button>
</p>

Answer 2

// Images Array
function getItem() {


  for (var i = 0; i < $images.length; i++) {
    var item = '<div class="grid-item">' + '<img src="/includes/images/wordpress/gallery/' + $images[i] + '" /></div>';
  }
  return item;
}

function getItems() {
  var items = '';
  for (var i = 0; i < 7; i++) {
    items += getItem();
  }
  // return jQuery object
  return $(items);
}

每当你调用getItem（）时，你都会重新开始for循环，并且因为你覆盖了循环中的item var，你得到的是你最后一张图像的7倍。

Theres有很多方法可以解决这个问题。最简单的可能就是展开你的一个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);
}

将图像附加到砌体网格中

2 个答案: