imagesLoaded функция jquery, не работающая с кладкой

Question

Я работаю над этим в течение некоторого времени.

Я пытаюсь использовать функцию fadein после того, как весь загруженный контент был загружен и был применен соответствующий макет кладки. Исследовали это в нескольких местах, пробовали разные версии imagesLoaded plugin, но, похоже, не могли заставить его работать.

Это мой основной HTML структура:

<div id="posts"> 

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

</div> 

Я зову кладку, а затем imagesLoaded JQuery плагин.

Мои js выглядят так (я понимаю, что мне нужно установить отображение: none в css в какой-то момент).

<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. Кажется, что при этой функции каменная колонкаWidth не вычисляется.

У меня на самом деле есть два tumblrs, где этот код тестируется.

1. http://kidsofdada.tumblr.com/ (это работает, но я хочу изображения исчезать после кладки сетка была установлена.
2. http://childofdada.tumblr.com/ изображения выцветания, но кладка границы не устанавливать должным образом, а также не изменение размера, когда браузер перетаскивается .

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

EDIT 2:

Попытки реализовать код ложного флага, я понимаю, что, возможно, это написано неправильно (попробовали переключая его).

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/kason для вычисления правильных мест.

После .masonry вы отобразите его обратно, сначала сокрыв принятый метод jQuery, удалив ярлык видимости и показывая fadeIn. Время здесь должно быть немного большим (я ставлю 2 секунды), иначе анимация никогда не будет видна из-за задержки, чтобы исчезнуть в большом количестве itens.

Код, чтобы показывать сообщения, может быть помещен в обратный вызов imagesLoaded, но я думаю, что он отлично работает в этом направлении.

Окончательный код:

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

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