Question

我一直在研究这个问题。

我尝试在加载所有帖子内容并应用相关的砌体布局后使用fadein函数。在几个地方研究了这个，尝试了imagesLoaded plugin的不同版本，但似乎无法使其正常工作。

这是我的基本html结构：

<div id="posts">

    <article class="post text clearfix">
    // text post etc
    </article>

</div>

我正在调用砌体，然后是imagesLoaded jquery插件。

我的js看起来像这样（我知道我需要在某些时候在css中设置display：none。）

<script type="text/javascript">
$(document).ready(function() {
    var $eachContainer = $('.post');
    $eachContainer.hide();
    var $wall = $('#posts');
    $wall.imagesLoaded( function() {    
        $eachContainer.fadeIn();
        $wall.masonry({
            columnwidth: 84,
            itemSelector : '.post'
        });
    });
});
</script>

我也试过在window.load函数中运行上面的代码。似乎使用此函数不会计算砌体columnWidth。

我实际上有两个tumblrs正在测试此代码。

http://kidsofdada.tumblr.com/（这是有效的，但我希望图像在砌体网格设置后淡入。
http://childofdada.tumblr.com/图片淡入，但砌体边框设置不正确，拖动浏览器时也不会调整大小。

编辑1：

我尝试使用插件站点提供的示例重新编码上述函数。所以现在我的代码看起来像这样：

 var container = document.querySelector('#posts');
 var msnry = new Masonry( container, {
    columnWidth: 84,
    itemSelector: '.post',
    isInitLayout: false
});

msnry.on( 'layoutComplete', function() {
    console.log('layout is complete');
    $('.post').fadeIn();
});

加载页面时，所有帖子都会被隐藏。如何仅将函数绑定到window.load或document.ready函数？如果您调整浏览器的大小，则会触发并显示帖子：http://childofdada.tumblr.com/

编辑2：

尝试实现false标志代码，我意识到我可能错误地写了这个（试过切换它）。

var firstTime = 'false';

var container = document.querySelector('#posts');
var msnry = new Masonry( container, {
    columnWidth: 84,
    itemSelector: '.post',
    isInitLayout: false
});

if (firstTime == 'false') {
    msnry.on( 'layoutComplete', function() {
        console.log('layout is complete');
        $('.post').fadeIn();
        firstTime = 'true';
    });
}

Answer 1

我希望这就是你想要的：http://jsfiddle.net/nVYcP/

我必须做的是用visibility: hidden隐藏身体，而不是hide()（设置display: none）。这会欺骗jQuery / masonry来计算正确的位置。

在.masonry之后，您首先使用jQuery接受的方法隐藏它，删除可见性标记，然后显示fadeIn。这里的时间必须有点大（我放2秒），否则动画永远不可见，因为大量的眩光会消失。

显示帖子的代码也可以放在imagesLoaded回调中，但我认为这样做很好。

最终代码：

$('#posts').masonry({columnWidth: 84});

$("#site")
    .hide()
    .css("visibility", "")
    .fadeIn(2000);

imagesLoaded jquery函数不能与砌体一起使用

1 个答案: