JQuery Масонство и Ajax Append Items?

Ответ 1

Имел подобную проблему и вместо этого использовал следующую строку (преобразованную для вашего кода). Извините, я не помню, где я его нашел.

В коде замените это:

jQuery("#content").append(el).masonry( 'appended', el, true );

При этом:

jQuery("#content").append(el).masonry( 'reload' );

http://masonry.desandro.com/methods.html

Ответ 2

Похоже, что функция masonry ожидает, что объект jQuery будет вторым параметром, а не сырой HTML-строкой. Вы можете исправить это, обернув параметр обратного вызова успеха так:

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

Ответ 3

var mediaItemContainer = $( '#container' );
mediaItemContainer.masonry( {
    columnWidth:  '210px',
    itemSelector: '.item'
} );
$( mediaItemContainer ).prepend( '<div class="item">foo</div>' );
$( mediaItemContainer ).masonry( 'reloadItems' );
$( mediaItemContainer ).masonry( 'layout' );

Решение

Ответ 4

success: function (response) {
  if(response.length > 0) {
     var el = js(response); 
     setTimeout(function () {
       js("#masonry").append(el).masonry( 'appended', el).masonry('layout');
     }, 500);
  }
}   

отлично работает для меня.

Ответ 5

Следующее работает для меня. У меня есть ajax, который возвращает набор элементов html (возвращает частичный вид, из ajax), когда я нажимаю кнопку загрузки больше на моей веб-странице. Ниже представлен частичный вид, который динамически генерируется.

foreach (var item in Model.SocialFeedList)
{
        <div class="grid-item">
            <div class="grid-inner">
                <div class="img-holder" style="background-image:url(imageURLHere)">
                </div>
                <div class="content-area">
                    <h3><a target="_blank" href="SomeLink">TitleOfTheLink</a></h3>
                    <p>SomeDescription</p>
                    <h5 class="date"><span>Published</span>: 2016/07/13</h5>
                </div>
            </div>
        </div>
}

Ответ 6

У меня была такая же проблема с моим списком ajax, я мог бы решить ее, вызвав функции reloadItems и layouts после ответа ajax:

var mediaItemContainer = $( '#container' );
mediaItemContainer.masonry( {
    columnWidth:  '210px',
    itemSelector: '.item'
} );
$( mediaItemContainer ).prepend( '<div class="item">foo</div>' );
$( mediaItemContainer ).masonry( 'reloadItems' );
$( mediaItemContainer ).masonry( 'layout' );

Ответ 7

Я добавил следующий код после команды append, и все было в порядке:

$grid.imagesLoaded().progress( function() {
    $grid.masonry('layout');
});

Причина:

Выгруженные изображения могут отбрасывать масонские макеты и вызывать элементы элементов для перекрытия. imagesLoaded устраняет эту проблему. imagesLoaded - это отдельный script, который вы можете скачать на imagesloaded.desandro.com.

источник

Ответ 8

Вам не нужен макетный макет. В соответствии с документами вам нужно обновить макет, выполнив .masonry() после каждого изменения (например, .masonry('appended')):

$grid.masonry()
  .append(elem)
  .masonry('appended', elem)
  // layout
  .masonry();

(источник: http://masonry.desandro.com/methods.html)

Ответ 9

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

  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);
      }
    }
  });

Ответ 10

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

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

Ответ 11

здесь четко объясняется https://masonry.desandro.com/methods.html#prepended

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 );
        }
    });
});

в вашем success function, вам нужно, чтобы ваш ответ "html" был завернут в jquery object, а затем добавьте с помощью html() или append().

var $content = $( html );
jQuery("#content").append($content).masonry( 'appended', $content );

окончательный код должен быть

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

Ответ 12

Я хочу дать свидетельство о моей жизни, о том, как моя жизнь полностью изменилась от бедной к богатой, я хочу поблагодарить Господа Великого Магистра Иллюминатов, за то, что он принял меня в братство Иллюминатов. Я много раз пытался присоединиться к Иллюминатам, но меня обманули, но я никогда не сдамся, потому что если ты сдашься в жизни, жизнь откажется от тебя, я все еще продолжаю пытаться, потому что я верю, что присоединюсь к иллюминатам и стану успешным в жизни, когда я встретил подходящего человека Я был полностью посвящен в братство иллюминатов, мне дали столько преимуществ в качестве нового члена. Ниже приведены льготы, предоставляемые мне как новому члену 1 НАЛИЧНЫЕ ДЕНЬГИ в размере 2 000 000,00 долл. США 2 АВТОМОБИЛЬ НА МОЙ ВЫБОР 3 ДОМ НА МОЙ ВЫБОР 4 МЕЖДУНАРОДНАЯ ВИЗА ДЛЯ ПУТЕШЕСТВИЯ В ЛЮБЫХ СТРАНАХ МИРА 5 КОЛЬЦО ЗАЩИТЫ ДЛЯ ЗАЩИТЫ МОЕЙ САМОЙ И МОЕЙ СЕМЬИ братство иллюминатов Реально, если вы встретили подходящего человека, к которому вы присоединитесь, поэтому, если вы хотите перемен в своей жизни, вы должны присоединиться к братству иллюминатов и добиться успеха во всех сферах своей жизни, если вы хотите быть богатым, сильным, защищенным, Известно, что вы должны связаться с официальным электронным адресом братства иллюминатов: [email protected], вы можете посетить сайт братства иллюминатов: http://churchofdevil666.wordpress.com или позвонить/отправить текст +1 (301) 969 2020 или WhatsApp +1 (508) 819 2672 о том, как вступить в братство иллюминатов, вы должны знать, что присоединение к братству иллюминатов не сводится к деньгам - это бесплатно, если вы будете следовать инструкции, к которой вы присоединитесь успешно, без каких-либо трудностей.

Ответ 13

Для масонства v3.2.2 (последний на момент публикации) это работает:

Предполагая, что newHtml является строкой, подобной этой:

<li>item 1</li><!--split-->
<li>item 2</li><!--split-->
<li>item 3</li>

Вы обрабатываете его следующим образом:

$.get(apiUrl, function(newHtml) {
    var textArr = newHtml.split("<!--split-->");
    var elArr = [];
    $.each(textArr, function(i,v) {
        if (v) {
            elArr.push($(v)[0]);
        }
    });
    $(this).append(elArr);
    $container.waitForImages( function() {
        $container.masonry('appended', elArr);
    });
}

Взял мне 2 часа, чтобы узнать это!

Ответ 14

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

//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, и voilá, есть макет кладки.