jQuery Masonry 和 Ajax 追加项目？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8722197/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Masonry and Ajax Append Items?
提问by Andy
I am trying to use some ajax and the jQuery Masonry plugin to add some items - but for some reason the new items aren't getting the masonry applied ?
我正在尝试使用一些 ajax 和 jQuery Masonry 插件来添加一些项目 - 但由于某种原因，新项目没有应用砌体？
I'm using
我正在使用
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 );
}
});
});
However the items that are appended subsequently don't have the class="masonry-brick"applied which means that they stuff up completely the positioning ?
但是，随后附加的项目没有class="masonry-brick"应用，这意味着它们完全填满了定位？
采纳答案by frankp
Had a similar problem and instead used the following line (converted for your code). Sorry, I don't recall where I found it.
有一个类似的问题，而是使用以下行（为您的代码转换）。抱歉，我不记得在哪里找到的。
In your code replace this:
在你的代码中替换这个：
jQuery("#content").append(el).masonry( 'appended', el, true );
With this:
有了这个：
jQuery("#content").append(el).masonry( 'reload' );
回答by ryanlahue
It appears that the masonryfunction expects a jQuery object as its second parameter and not a raw HTML string. You should be able to fix this by wrapping the success callback parameter like so:
该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 );
}
});
});
回答by subone
回答by kdgilang
success: function (response) {
if(response.length > 0) {
var el = js(response);
setTimeout(function () {
js("#masonry").append(el).masonry( 'appended', el).masonry('layout');
}, 500);
}
}
works fine for me.
对我来说很好用。
回答by cham
Following has worked for me. I have an ajax which returns set of html items (returns a partial view, from the ajax) when I click a load more button in my web page. Below is the partial view, which is dynamically generated.
以下对我有用。我有一个 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>
}In the success callback ajax method, I have done the below,where "response" is the set of html items I get from the above html. Where "divFeedList" is the root element where I show the set of html elements.
在成功回调ajax方法中，我完成了以下操作，其中“响应”是我从上面的html中获得的一组html项。其中“divFeedList”是我显示 html 元素集的根元素。
jQuery("divFeedList").append(response).masonry('reloadItems', response, true).masonry();
jQuery("divFeedList").append(response).masonry('reloadItems', response, true).masonry();
Please let me know if the answer is unclear.
如果答案不清楚，请告诉我。
回答by Chris Kon
I added the following code after the appendcommand and everything was fine:
我在append命令后添加了以下代码，一切都很好：
$grid.imagesLoaded().progress( function() {
$grid.masonry('layout');
});
The reason:
原因：
Unloaded images can throw off Masonry layouts and cause item elements to overlap. imagesLoaded resolves this issue. imagesLoaded is a separate script you can download at imagesloaded.desandro.com.
卸载的图像可能会脱离 Masonry 布局并导致项目元素重叠。imagesLoaded 解决了这个问题。imagesLoaded 是一个单独的脚本，您可以从 imagesloaded.desandro.com 下载。
回答by poxip
You are missing Masonry layout call. According to the docs you need to refresh the layout, executing .masonry()after every change (for instance .masonry('appended')):
您缺少 Masonry 布局调用。根据文档，您需要刷新布局，.masonry()在每次更改后执行（例如.masonry('appended')）：
$grid.masonry()
.append(elem)
.masonry('appended', elem)
// layout
.masonry();
(source: http://masonry.desandro.com/methods.html)
回答by Youssef AAZRI
I had the same problem with my ajax listing, i could solve it by calling reloadItems& layoutsfunctions after ajax respond :
我的 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' );
回答by Aamer Shahzad
it is clearly explained here https://masonry.desandro.com/methods.html#prepended
这里清楚地解释了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 );
}
});
});
in your success function, you need your response "html" to be wrapped in a jquery objectand then append using html()or append().
在您的 中success function，您需要将您的响应“html”包装在 a 中jquery object，然后使用html()或附加append()。
var $content = $( html );
jQuery("#content").append($content).masonry( 'appended', $content );
the final code should be
最终的代码应该是
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 );
}
});
});
回答by Mudaser Ali
This solution works for me:-
这个解决方案对我有用：-
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);
}
}
});
