在砌体上添加元素
在砌体上添加元素
提问于 2013-12-07 19:12:53
关于这个问题，我看过各种各样的问题，但似乎没有一个能解决我的问题。
当页面第一次加载时，我开始对前十幅图像进行砖石处理，如下所示：
$('img').load(function(){
var masonry = $('#gallery').masonry({
itemSelector: '.item',
});
});接下来，当用户滚动到页面底部时，我调用ajax：
if ($(window).scrollTop() >= $(document).height() - $(window).height() + 5) {
request_pending = true;
$('#loading').show();
$.ajax({
url: '/timeline/getPhotosAPI',
type: 'POST',
data: { id:'<?=$id?>', offset: offset },
success: function(html){
if(html.length > 0){
var response = JSON.parse(html);
$.each(response, function(i, item){
$('#gallery').append(item);
var $html = $(item);
$('#gallery').find('.item').masonry('appended', $html, true);
});
$('#loading').hide();
offset = parseInt(offset) + 10;
request_pending = false;
}else{
alert('fail');
}
}
});
}其中的响应是来自我的php的html DOMS的JSON字符串，类似于：
array( 0 => '<div class="items"><img src="xyz" /></div>" );上面的代码成功地将我的图像附加到了我的#gallery容器中，但是砖石不会读取我的".item“类并将相应的位置附加到我新添加的项中。
有什么想法吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2013-12-08 02:00:35
看起来砖石不适用于html字符串。
这是我的代码，起作用：
<script>
var offset = 10;
var request_pending = false;
var container = document.querySelector('#gallery');
var msnry = new Masonry(container, {
itemSelector: '.item',
});
$(document).ready(function(){
$(window).scroll(function () {
if (request_pending) {
return;
}
if ($(window).scrollTop() >= $(document).height() - $(window).height() + 5) {
request_pending = true;
$('#loading').show();
$.ajax({
url: '/timeline/getPhotosAPI',
type: 'POST',
data: { id:'<?=$id?>', offset: offset },
success: function(pictures){
if(pictures.length > 0){
var response = JSON.parse(pictures);
var elems = [];
var fragment = document.createDocumentFragment();
$.each(response, function(i, item){
var img = document.createElement("img");
$(img).attr("src", item['photo_file']);
var div = document.createElement("div");
$(div).addClass("item");
$(div).append(img);
fragment.appendChild( div );
elems.push( div );
});
// append elements to container
container.appendChild( fragment );
// add and lay out newly appended elements
$('#gallery').imagesLoaded( function(){
msnry.appended( elems );
});
$('#loading').hide();
offset = parseInt(offset) + 10;
request_pending = false;
}else{
alert('fail');
}
}
});
}
});
});
</script>因此，我的php返回图像源的JSON字符串，而不是HTML字符串。砌体只接受DOM元素。
注意:这里使用imageLoaded.js来防止图像堆叠。没有它，砖石工就不能正常工作。
Stack Overflow用户
发布于 2013-12-07 19:29:07
看起来，在砖石文档中，它们将项附加到容器中，然后通知砖石工，它们被追加了。
var container = document.querySelector('#container');
var msnry = new Masonry( container );
container.appendChild( elem );
msnry.appended( elem );
msnry.layout();请参阅砌体:方法
$.each(response, function(i, item){
$('#gallery').append(item);
msnry.appedned(item);
});创建msnry变量时，需要将其设置为全局变量，或者至少是更高级别的变量。
在添加了所有内容之后，我相信您需要调用msnry.layout();来“激活”新项目。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20449463
复制
相似问题
在Tumblr上的砌体中添加{meta:标记}
在动态添加砌体元素后如何更新路径点位置
不良砌体元素：[对象对象]
为jQuery砌体中的元素添加底部边距
jQuery：“加载更多”砌体元素？
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
