imagesLoaded jquery function not working with masonry

问题

I've been working on this for some time.

I am trying to use a fadein function after all of my post content has been loaded and had the relevant masonry layout applied. Have researched this in several places, tried different versions of the imagesLoaded plugin but cannot seem to get it working.

This is my basic html structure:

<div id="posts">

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

</div>

I am calling masonry and then the imagesLoaded jquery plugin.

My js looks like this (I realise I need to set display:none in the css at some point).

<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>

I've tried running the above in a window.load function too. It seems as though with this function the masonry columnWidth is not being calculated.

I actually have two tumblrs where this code is being tested.

http://kidsofdada.tumblr.com/ (this is working but I want the images to fade in AFTER the masonry grid has been set.
http://childofdada.tumblr.com/ images fading in, but masonry border not setting properly, also not resizing when the browser is dragged.

EDIT 1:

I have tried to recode the above function using the example provided at the plugin site. So now my code looks like this:

 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();
});

When the page is loaded all posts are hidden. How do I bind the function only to the window.load, or document.ready functions? If you resize the browser, this triggers and will display the posts: http://childofdada.tumblr.com/

EDIT 2:

Trying to implement the false flag code, I realise I may have this written incorrectly (have tried switching it).

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';
    });
}

回答1:

I hope this is what you want: http://jsfiddle.net/nVYcP/

What i had to do is hide the body with visibility: hidden, and not hide() (which set display: none). This tricks jQuery/masonry to calculate the correct places.

After the .masonry you display it back by first hiding with the jQuery accepted method, removing the visibility tag, and showing with fadeIn. The time here have to be a bit big (i put 2 seconds) or else the animation is never visible due to the lag to fade in the large amount of itens.

The code to show the posts can be put in the imagesLoaded callback as well, but I think it's working fine this way.

Final code:

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

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

来源：https://stackoverflow.com/questions/21511005/imagesloaded-jquery-function-not-working-with-masonry

标签

jquery

html

tumblr

jquery-masonry