title: Append images into masonry grid
body: <p>My Js is very limited, so don't shoot me for any errors below.</p>
  
  <p>I'm trying to append some locally stored images into a masonry grid.</p>
  
  <p>Currently when i click on the append button it's adding only the last image in my array multiple times.</p>
  
  <p>What I'm trying to do is add the next 7 images with each click of the button.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(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 &lt;img&gt;
        // &lt;img&gt; 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 &lt; $images.length; i++) {
      var item = '&lt;div class="grid-item"&gt;' + '&lt;img src="/includes/images/wordpress/gallery/' + $images[i] + '" /&gt;&lt;/div&gt;';
    }
    return item;
  }
  
  function getItems() {
    var items = '';
    for (var i = 0; i &lt; 7; i++) {
      items += getItem();
    }
    // return jQuery object
    return $(items);
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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%);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.1.8/imagesloaded.pkgd.min.js"&gt;&lt;/script&gt;
  &lt;div class="templates"&gt;
    &lt;div class="grid-item"&gt;
      &lt;img src="http://lorempixel.com/output/people-q-c-319-264-9.jpg" alt=""&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;p&gt;
    &lt;button id="append-button"&gt;Append new items&lt;/button&gt;
  &lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>