кладка не добавляется к концу контейнера

Question

Я пытаюсь добавить новую информацию в конец контейнера, а не загружать ее до конца, она загружает ее поверх другой информации.

Я загружаю свои данные через вызов ajax, если у вас есть кнопка. При щелчке по этой кнопке он должен добавить данные до конца, но он появится в верхнем левом углу.

var makeArticleTemplate = function(newData){ 
    var string =''; 

    /// makes article tile 
    for (var i = 0; i < newData.data.length; i++) { 
    var d = newData.data[i]; 

     string += ' <article class="'+d.type+'">', 
     string += ' <div class="img-wrap">', 
     string += ' <div class="grad"></div>', 
     string += ' <img src="http://lorempixel.com/600/600/cats/" alt="" />', 
     string += ' </div>', 
     string += ' <div class="content-wrap">', 
     string += ' <div class="publish-date">', 
     string += ' <p>october</p>', 
     string += ' <p>2015</p>', 
     string += ' </div>', 
     string += ' <div class="content-title">', 
     string += ' <h3>'+d.title+'<h3>', 
     string += ' </div>', 
     string += ' <div class="summary">', 
     string += ' <p>'+d.subtitle+'</p>', 
     string += ' </div>', 
     string += ' <div class="event-date">', 
     string += ' <div class="event-date-month">', 
     string += ' <p class="day">'+d.eventDate_day+'</p>', 
     string += ' <p class=day-nt>st</p>', 
     string += ' <p class="month">'+d.eventDate_month+'</p>', 
     string += ' <p class="year">'+d.eventDate_year+'</p>', 
     string += ' </div>', 
     string += ' </div>', 
     string += ' </article>'; 
    } 


    $(".hp-grid-wrapper").append($(string)).masonry({ 
     columnWidth: 'article', 
     itemSelector:'article', 
     percentPosition: true 
    }); 
}; 

Answer 1

Итак, я понял, что делать. Надеюсь, что это поможет кому-то еще, у кого была такая же проблема

  $(".hp-grid-wrapper").masonry({ 
      columnWidth: 'article', 
      itemSelector:'article', 
      percentPosition: true 
     }); 
    var elems=$(); 
    var string =''; 
    /// makes article tile 
    for (var i = 0; i < newData.data.length; i++) { 
     var d = newData.data[i]; 

     string += ' <article class="'+d.type+'">', 
     string += ' <div class="img-wrap">', 
     string += ' <div class="grad"></div>', 
     string += ' <img src="http://lorempixel.com/600/600/cats/" alt="" />', 
     string += ' <h3 class="img-header"> This is a title</h3>', 
     string += ' </div>', 
     string += ' <div class="content-wrap">', 
     string += ' <div class="publish-date">', 
     string += ' <p>october</p>', 
     string += ' <p>2015</p>', 
     string += ' </div>', 
     string += ' <div class="content-title">', 
     string += ' <h3>'+d.title+'<h3>', 
     string += ' </div>', 
     string += ' <div class="summary">', 
     string += ' <p>'+d.subtitle+'</p>', 
     string += ' </div>', 
     string += ' <div class="event-date">', 
     string += ' <div class="event-date-month">', 
     string += ' <p class="day">'+d.eventDate_day+'</p>', 
     string += ' <p class=day-nt>st</p>', 
     string += ' <p class="month">'+d.eventDate_month+'</p>', 
     string += ' <p class="year">'+d.eventDate_year+'</p>', 
     string += ' </div>', 
     string += ' </div>', 
     string += ' </article>'; 

     var elem = $(string); 
     elems = elems ? elems.add(elem) : elem; 
     string =''; 

     } 
     $(".hp-grid-wrapper").append(elems); 
     $(".hp-grid-wrapper").masonry('appended', elems); 
     $(".hp-grid-wrapper").masonry(); 
};