jQuery Masonry и Ajax Добавить элементы? - PullRequest
Новая
       6

jQuery Masonry и Ajax Добавить элементы?

29 голосов
/ 04 января 2012

Я пытаюсь использовать некоторые ajax и плагин jQuery Masonry для добавления некоторых элементов - но по какой-то причине новые элементы не получают кладку?

Я использую 

jQuery.ajax({
    type: "POST",
    url: ajax_url,
    data: ajax_data,
    cache: false,
    success: function (html) {
        if (html.length > 0) {
            jQuery("#content").append(html).masonry( 'appended', html, true );
        }
    });
});

Однако к элементам, которые добавляются впоследствии, не применяется class="masonry-brick", что означает, что они полностью заполняют позиционирование?

Ответы [ 13 ]

0 голосов
/ 12 марта 2015

Я нашел решение, которое отлично работает для меня. каждые полсекунды перезагружается макет экземпляра кладки. 

//initialization of a masonry object:

var msnry = new Masonry("#container",{
itemSelector: '#post',
gutter: 15
}); 

//thread that makes the magic happens:

setInterval(function(){
msnry.reloadItems();
msnry.layout();
},500);

таким образом, вы можете добавлять вещи, используя ajax, и вуаля, есть кладка.

0 голосов
/ 16 января 2014

Только для будущих людей, которые находят эту проблему, и вышеуказанные решения не работают для них: я обнаружил проблему с моим селектором и добавленным элементом, который не имеет такой же случай, то есть itemSelector был .Card, но ябыл добавлен <div class="card">.

Надеюсь, это поможет.

0 голосов
/ 01 июля 2013

Это решение работает для меня: - 

  jQuery.ajax({
    type: "POST",
    url: ajax_url,
    data: ajax_data,
    dataType: 'json',
    cache: false,
    success: function(response) {
      if (response.length > 0) {
        var $container = $('#container');
        var msnry = $container.data('masonry');
        var elems = [];
        var fragment = document.createDocumentFragment();
        for (var x in response) {
          var elem = $(response[x]).get(0);
          fragment.appendChild(elem);
          elems.push(elem);
        }
        $container.appendChild(fragment);
        msnry.appended(elems);
      }
    }
  });
Страница:
...