Каменная кладка: создание сетки на обратном вызове AJAX

Question

Так что я хорошо знаком с масонством, я бы сказал, но мне не приходилось это делать раньше.

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

Моя структура сетки не существует вообще, пока она не вызвана через ajax.

Например (псевдокод):

1. Страница Нагрузки
2. пользователь щелкает ссылку
3. AJAX вызова, HTML возвращается строка и добавляется в DOM с помощью JQuery.
4. Необходимо создать экземпляр сетки кладки на основе этого HTML.

В основном HTML, который возвращается через AJAX выглядит примерно так:

<div class="grid-57"> 
    <a class="item" href="http://www.example.com"> 
     <img src="http://fpoimg.com/350x350"/></a> 
    </a> 
    <a class="item" href="http://www.example.com"> 
     <img src="http://fpoimg.com/350x250"/></a> 
    </a> 
    <a class="item" href="http://www.example.com"> 
     <img src="http://fpoimg.com/350x450"/></a> 
    </a> 
</div> 

Так как вы можете видеть, я не добавлять к существующей сети или кирпичной кладке, мне нужно создать новый при успешном возврате AJAX.

My JS выглядит примерно так:

$('.get-grid').click(function(e){ 
    var id = $(this).data('id'); 
    $.post(ajaxurl, { action: 'get_grid', id: id }, function(response) { 

     // Append this html to the area of the site where I have the grids. 
     $('.all-the-grids').append(response); 

     // Here is where i need to actually turn this HTML that I just added into a masonry object and lay it out. 
     var $container = $('.grid-' + id); 
     msnry = new Masonry($container[0], { 
      columnWidth: 188, 
      itemSelector: '.item', 
      gutter: 10 
     }); 
     msnry.on('layoutComplete', function(){ 
      // never making it in here. 
     }); 
    }); 
}); 

Любая идея, как это сделать?

EDIT

Оказывается, моя сетка не становится выложила правильно, без ошибок, но он никогда не достигает обратный вызов layoutComplete здесь.

Answer 1

Сделайте это так же, как обычно с масонством, факт, что вы делаете это в обратном вызове, ничего не меняет.

$('.get-grid').click(function(e){ 
    var id = $(this).data('id'); 
    $.post(ajaxurl, { action: 'get_grid', id: id }, function(response) { 

     // Append this html to the area of the site where I have the grids. 
     var grids = $('.all-the-grids'); 
     grids.append(response); 
     var msnry = new Masonry(grids[0], { 
     }); 
    }); 
}); 

Answer 2

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

$containers = $('.all-the-grids'); 
$containers.append(response).imagesLoaded(function() { 
    $containers.masonry({ 
     itemSelector: '. a' 
    }); 
}); 

Примечание: imagesLoaded плагин JQuery