Append images into masonry grid


Staff member
My Js is very limited, so don't shoot me for any errors below.

I'm trying to append some locally stored images into a masonry grid.

Currently when i click on the append button it's adding only the last image in my array multiple times.

What I'm trying to do is add the next 7 images with each click of the button.

<div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override">
$(document).ready(function() {
  var $container = $('.templates');

  $container.imagesLoaded(function() {
      itemSelector: '.grid-item',
      gutter: 12,
      isFitWidth: true

// Click Function

  $('#append-button').click(function() {
    var $items = getItems();

    // hide by default

    // append to container
    $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
      // 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);
<pre class="snippet-code-css lang-css prettyprint-override">
.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%);
<pre class="snippet-code-html lang-html prettyprint-override">
&lt;script src=""&gt;&lt;/script&gt;
&lt;script src=""&gt;&lt;/script&gt;
&lt;script src=""&gt;&lt;/script&gt;
&lt;div class="templates"&gt;
  &lt;div class="grid-item"&gt;
    &lt;img src="" alt=""&gt;

  &lt;button id="append-button"&gt;Append new items&lt;/button&gt;