31

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

4

13 回答 13

42

该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 );
        }
    });
});
于 2012-01-04T07:26:54.873 回答
27 
var mediaItemContainer = $( '#container' );
mediaItemContainer.masonry( {
    columnWidth:  '210px',
    itemSelector: '.item'
} );
$( mediaItemContainer ).prepend( '<div class="item">foo</div>' );
$( mediaItemContainer ).masonry( 'reloadItems' );
$( mediaItemContainer ).masonry( 'layout' );

解决方案

于 2014-03-23T18:53:56.410 回答
24

有类似的问题，而是使用以下行（转换为您的代码）。抱歉，我不记得我在哪里找到的。

在你的代码中替换这个：

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

有了这个：

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

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

于 2012-05-22T19:03:11.100 回答
5 
success: function (response) {
  if(response.length > 0) {
     var el = js(response); 
     setTimeout(function () {
       js("#masonry").append(el).masonry( 'appended', el).masonry('layout');
     }, 500);
  }
}

对我来说很好。

于 2016-05-30T08:19:33.957 回答
3

以下对我有用。我有一个 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>
}

在成功回调 ajax 方法中，我完成了以下操作，其中“响应”是我从上述 html 中获得的一组 html 项。其中“divFeedList”是显示 html 元素集的根元素。

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

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

于 2016-07-13T07:11:51.607 回答
3

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

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

原因：

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

来源

于 2017-03-09T23:45:51.257 回答
1

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

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

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

于 2016-01-21T18:42:08.410 回答
1

我的 ajax 列表也有同样的问题，我可以通过在 ajax 响应后调用reloadItems&函数来解决它：layouts

var mediaItemContainer = $( '#container' );
mediaItemContainer.masonry( {
    columnWidth:  '210px',
    itemSelector: '.item'
} );
$( mediaItemContainer ).prepend( '<div class="item">foo</div>' );
$( mediaItemContainer ).masonry( 'reloadItems' );
$( mediaItemContainer ).masonry( 'layout' );
于 2016-04-26T11:17:57.780 回答
0

该解决方案对我有用：-

  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);
      }
    }
  });
于 2013-07-01T08:46:16.967 回答
0

仅适用于发现此问题且上述解决方案不适用于他们的未来人：我发现我的选择器存在问题，并且我添加的元素没有相同的情况，即itemSelector是.Card但我正在附加<div class="card">.

希望这可以帮助。

于 2014-01-16T00:56:21.497 回答
0

这里有清楚的解释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”包裹在 a 中jquery object，然后使用html()or附加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 );
        }
    });
});
于 2017-05-30T12:21:18.183 回答
-1

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

于 2015-03-21T11:13:07.610 回答
-2

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

//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 追加内容，瞧，砖石布局。

于 2015-03-12T18:22:29.193 回答