jQuery masonry - 砌体重载后的调用方法

时间:2013-02-08 13:27:42

标签: javascript jquery twitter-bootstrap jquery-masonry

我使用Twitter Bootstrap和jQuery Masonry开发新网站。我将新元素添加到砌体容器中。

元素既不会附加到现有子项中,也不会附加到现有子项之间,而是插入到它们之间,具体取决于这样的排序顺序:

var elem = $(boxes[rand2]);
$(".post").each(function(i){
    if(parseFloat($(this).data("weight"))<=weight){
        elem.insertBefore(this);
        return false;
    }
    else if (i == $(".post").length - 1) {
        elem.insertAfter(this);
        return false;
    }
});

到目前为止这种方法很完美。我想要实现的是元素只有在到达目的地时才会显示。我不想禁用动画,但是新元素的空间应该显示(空),并且只有当通过砖石重新排列所有内容时,才会出现新元素。

我认为会有一个回调动作在重新加载后会像这样触发:

$('#posts').masonry('reload',function(){
  alert('re-aligning finished');
});

但这不起作用,它会提早发生。

目前,我做了

$('#posts').masonry('reload',function(){
  window.setTimeout(showElem,500);
});
function showPosts(){
  $('.post').show();
}

这似乎有效 - 但固定的500毫秒超时并不是一个真正漂亮的解决方案......

那么,有什么建议吗?

2 个答案:

答案 0 :(得分:0)

我猜你已经在使用jQuery了。也许使用deferred对象可能很有用。

答案 1 :(得分:0)

你可以在文档加载后稍后再做吗?

(function($) {
$(document).ready(documentReadyFunction);
$(window).resize(windowResizeFunction);
$(window).load(windowLoadFunction);
function documentReadyFunction() {
    //your inserted html here
}
function windowResizeFunction() {
    //resize here
}
function windowLoadFunction() {
    //do masonry here
}
})(jQuery);