jQuery的砌体和Ajax取追加项目造成图像重叠 [英] jQuery Masonry and Ajax-fetching to Append Items Causing Image Overlap
问题描述
在这里另一幅图像重叠问题，用砖石和Ajax追加在Word preSS项目。第一次更多的项目被追加，图像重叠。然而，当加载页面时，图像不再重叠。我做了一些研究这个，是因为有计算图像的高度后实现。
从砌体网站上的帮助页面，故建议使用和getimagesize 的功能，以指定图像的宽度和高度。
不过，这是我在哪里卡住了。因为PHP的我有限的知识，我不知道如何使用此功能，或者将它放在我的code，所以我在寻找一个小的方向在这里。谁能帮我想出如何在和getimagesize 的功能集成到我的code？
下面是砖石code：
$（文件）。就绪（函数（）{
变量$箱= $（'＃loops_wrapper'）;
$ container.imagesLoaded（函数（）{
$ container.masonry（{
itemSelector：.post_box，
columnWidth中：302
}）;
}）;
}）;
这是阿贾克斯取code：
$（'。load_more_cont一）。住（点击，功能（五）{
即preventDefault（）;
$（本）.addClass（'装'）文本（载入中...）;
$阿贾克斯（{
键入：GET，
网址：$（本）.attr（HREF'）+'#loops_wrapper'，
数据类型：HTML，
成功：函数（出）{
结果= $（出）.find（'post_box。'）;
NEXTLINK = $（出）.find（'load_more_cont一个。'）ATTR（HREF）。
$（'＃loops_wrapper）追加（结果）.masonry（'附加'，结果）;
$（'load_more_cont一个。'）removeClass移除（'装'）文本（加载更多内容）。;
如果（NEXTLINK！=未定义）{
$（'load_more_cont一个。'）ATTR（'的href'，NEXTLINK）。
} 其他 {
$（'。load_more_cont）删除（）。
}
}
}）;
}）;
您可以尝试实行大卫DeSandro的计时方法在这里附加图片...
的建议，在底漆，处理图像的最佳解决方案是在img标签定义的大小属性，特别是利用无限滚动的时候，这是在下面的例子中所采用的解决方案。
当然，这不是在某些的CMS一个可行的选择，最显着的tumblr。在这种情况下，砌体需要调用满载新近所附之后的图像。这是通过延迟砌体回调完成。
函数（newElements）{
的setTimeout（函数（）{
$ wall.masonry（{appendedContent：$（newElements）}）;
}，1000）;
}
修改：如果无法实现共同延迟想法追加了无限滚动的物品，你可以尝试追加新的项目，而不是让后重装
$（'＃loops_wrapper）追加（结果）.masonry（'附加'，结果）;
做这样的
$（＃loops_wrapper）追加（结果）.masonry（'重装'）;
Another image overlap issue here using Masonry and Ajax to append items in Wordpress. The first time more items are appended, the images overlap. However, when the page is reloaded, the images no longer overlap. I realize after doing some research this has to do with calculating the height of the images.
From the help page on the Masonry website, it is suggested to use the getimagesize function in order to specify the width and height of the images.
However, this is where I am stuck. Because of my limited knowledge of PHP, I have no idea how to utilize this function or where to place it in my code, so I'm looking for a little direction here. Can anyone help me figure out how to integrate the getimagesize function into my code?
Here is the masonry code:
$(document).ready(function(){
var $container = $('#loops_wrapper');
$container.imagesLoaded( function(){
$container.masonry({
itemSelector : '.post_box',
columnWidth: 302
});
});
});
This is the ajax fetching code:
$('.load_more_cont a').live('click', function(e) {
e.preventDefault();
$(this).addClass('loading').text('Loading...');
$.ajax({
type: "GET",
url: $(this).attr('href') + '#loops_wrapper',
dataType: "html",
success: function(out) {
result = $(out).find('.post_box');
nextlink = $(out).find('.load_more_cont a').attr('href');
$('#loops_wrapper').append(result).masonry('appended', result);
$('.load_more_cont a').removeClass('loading').text('Load more posts');
if (nextlink != undefined) {
$('.load_more_cont a').attr('href', nextlink);
} else {
$('.load_more_cont').remove();
}
}
});
});
You could try to implement David DeSandro's timer approach here for appending images...
"As recommended in the primer, the best solution to handle images is to have the size attributes defined in the img tag, especially when using Infinite Scroll. This is the solution employed in the example below.
Of course, this is not a viable option in some CMSs, most notably Tumblr. In this situation, Masonry needs to be called after the newly-appended images are fully loaded. This is done by delaying the Masonry callback."
function( newElements ) {
setTimeout(function() {
$wall.masonry({ appendedContent: $(newElements) });
}, 1000);
}
EDIT: If you can't implement the common delay idea for appending items with infinite scroll, you could try reloading after appending new items so instead of
$('#loops_wrapper').append(result).masonry('appended', result);
do it like that
$("#loops_wrapper").append(result).masonry('reload');
这篇关于jQuery的砌体和Ajax取追加项目造成图像重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
