Question

我正在尝试使用一些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"，这意味着它们完全填满了定位？

Answer 1

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

Answer 2

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

Solution

Answer 3

有类似的问题，而是使用以下行（为您的代码转换）。对不起，我不记得我找到了它。

在您的代码中替换为：

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

有了这个：

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

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

Answer 4

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

对我来说很好。

Answer 5

以下对我有用。我有一个ajax，当我在我的网页中单击一个加载更多按钮时，它返回一组html项（从ajax返回一个局部视图）。以下是部分视图，它是动态生成的。

＆＃13;

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

＆＃13;

在成功回调ajax方法中，我已完成以下操作，其中＆＃34;响应＆＃34;是我从上面的HTML获得的一组html项目。哪里＆＃34; divFeedList＆＃34;是我显示html元素集的根元素。

jQuery("divFeedList").append(response).masonry('reloadItems', response, true).masonry();

如果答案不清楚，请告诉我。

Answer 6

我在append命令之后添加了以下代码，一切都很好：

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

原因：

卸载的图像可能会抛弃砌体布局并导致项目元素重叠。 imagesLoaded解决了这个问题。 imagesLoaded是一个单独的脚本，您可以在imagesloaded.desandro.com下载。

source

Answer 7

您缺少砌体布局调用。根据您需要刷新布局的文档，在每次更改后执行.masonry()（例如.masonry('appended')）：

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

（来源：http://masonry.desandro.com/methods.html）

Answer 8

我的ajax列表遇到了同样的问题，我可以通过拨打reloadItems＆amp;来解决这个问题。 ajax响应后的layouts函数：

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

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

Answer 10

只是为了将来发现此问题的人以及上述解决方案对他们不起作用：我发现我的选择器存在问题而我添加的元素没有相同的情况，即itemSelector是{{1但我正在追加.Card。

希望这有帮助。

Answer 11

这里清楚地解释了https://masonry.desandro.com/methods.html#prepended

services.AddMvc(options =>
{
   // add custom binder to beginning of collection
   options.ModelBinderProviders.Insert(0, new OwnBinderProvider());
});

在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 ); } }); });中，您需要回复＆＃34; html＆＃34;包含在success function中，然后使用jquery object或html()附加。

append()

最终代码应为

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

Answer 12

对于Masonry 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个小时才发现这个！

Answer 13

我找到了一个适合我的解决方案。它每隔半秒重新加载一个砌体实例的布局。

//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附加东西，而且还有砌体布局。

jQuery Masonry和Ajax附加项目？

13 个答案: