砖石搭接
砖石搭接
提问于 2015-01-31 03:36:37
我注意到我的砖石页面造成了重叠和不相等的间距。这是不一致的，似乎有时会发生，而在其他时候，它工作得很好。在每个场景中，如果我稍微调整窗口的大小，mason()函数就会介入并修复它。我最初认为这是一个必须等待图像加载(一次加载大约30个)的问题，但我已经实现了imagesLoaded，看不出有什么不同。有人能指出我的错误吗？
<script>
function mason() {
var $container = $('#dealcontainer').masonry({
itemSelector: '.outerdeal',
columnWidth: '.outerdeal'
});
$container.imagesLoaded(function(){
$container.masonry();
});
}
function colorize()
{
$('.dealfilterli').click(function (event) {
if (event.target.type !== 'checkbox') {
$(':checkbox', this).trigger('click');
}
$("input[type='checkbox']").change(function (e) {
if ($(this).is(":checked")) {
$(this).closest('li').addClass("colorize");
} else {
$(this).closest('li').removeClass("colorize");
}
});
});
}
function InitInfiniteScroll(){
$('#dealcontainer').infinitescroll({
navSelector : "div.pagination",
nextSelector : "div.pagination li a",
itemSelector : "#deals div.outerdeal",
loading:{
finishedMsg: '',
img: 'http://www.example.com/img/icons/site/spinner.gif',
msgText: '',
speed: 'fast',
},
},function(newElements) {
var $newElems = $( newElements );
$('#dealcontainer').masonry( 'appended', $newElems );
mason();
});
}
$( document ).ready(function() {
InitInfiniteScroll();
colorize();
});
$(window).resize(function() {
InitInfiniteScroll();
mason();
}).resize();
</script>回答 2
Stack Overflow用户
发布于 2015-05-10 00:00:59
尽管我使用了imagesLoaded，但我仍然遇到了完全相同的问题，在经过多次尝试和错误之后，我发现这个问题可以通过setTimeout函数来解决。以下是我的项目中的一个示例：
setTimeout(function() {
masonryContainer.imagesLoaded(function() {
masonryContainer.prepend(newPost);
masonryContainer.masonry('prepended', newPost);
});
}, 500);500ms的超时是任意的，所以我会在您的页面上使用它，以找到仍然可以解决您的问题的最低可能值。希望这能有所帮助！
干杯,
杰克
Stack Overflow用户
发布于 2016-03-18 20:42:09
您应该使用：
$container.masonry('reloadItems');在mason()函数上，所有内容都将被替换到正确的位置。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/28243346
复制相关文章
相似问题
腾讯云开发者
