Перекрытие в масонстве onload

Question

У меня возникла проблема с переполнением с кладкой. Я пытаюсь загрузить карты Twitter, но загружается, они все еще перекрывают друг друга. Они работают после изменения размера экрана. FYI, у меня есть ImageLoad и кладка там точно. Я делаю это в рельсах, поэтому не знаю, как бы я сделал jsfiddle. Буду признателен за любую оказанную помощь. Благодаря!

вот мой JS код:

$(document).ready(function() { 
$('.container').imagesLoaded(function(){ 
$('.container').masonry({ 
    columnWidth: '.tweet-box', 
    itemSelector: '.tweet-box' 
    }); 
}); 
}); 

index.html.erb:

<main class="container"> 
    <% @tweet.search("cnn").take(9).each do |j| %> 
<section class="tweet-box"> 
    <p> 
    <blockquote class="twitter-tweet"><p><a href=<%=j.uri %> data-datetime="2011-11-07T20:21:07+00:00"></a></blockquote> 
    <script src="//platform.twitter.com/widgets.js" charset="utf-8"></script> 
    </p> 
</section> 
    <% end %> 
</main> 

Answer 1

Я в конечном итоге фиксируя мою проблему с некоторой рекурсии. FYI, я не знаю, если это лучшее решение, но оно заработало для меня. Откройте для лучшего ответа, если у кого-то есть что-нибудь.

$(document).ready(function() { 

check_size(); 
check_width(); 

}); 

function check_size() 
{ 
if($('.tweet-box').first().height() == 0) 
{ 
    // alert('loop called: ' + $('.tweet-box').first().height()) 
    setTimeout('check_size()', 20); 
} 
else 
{ 
    // alert('initialized!!!! boo-ya') 
    var $container = $('.container').imagesLoaded(function() { 
     $container.isotope({ 
      // options 
      itemSelector: '.tweet-box', 
      layoutMode: 'masonry' 
     }); 
    }); 
    } 
} 

Answer 2

Для меня сочетание небольшого сценария «imagesloaded» и несколько дополнительных линий Jquery, что огнь кладка после всех изображений загружаются сделал трюк. Моя страница сноска теперь выглядит следующим образом:

<script src="/js/masonry.pkgd.min.js"></script> 
<script src="/js/imagesloaded.pkgd.min.js"></script> 

<script> 
    $('#catalogue').imagesLoaded(function(){ 
    $('#catalogue').masonry({ 
    columnWidth: 10, 
    itemSelector: '.item', 
    isAnimated: !Modernizr.csstransitions 
    /* isFitWidth: true */ 
    }); 
    }); 
</script> 

Я не помню, где я получил Пинтер из, но сценарий imagesloaded можно найти здесь: https://github.com/desandro/imagesloaded

Answer 3

Это работает для меня, с imagesloaded сценария установлен.

<script src="/js/masonry.pkgd.min.js"></script> 
<script src="/js/imagesloaded.pkgd.min.js"></script> 

<script> 
docReady(function() { 

    var grid = document.querySelector('.grid'); 
    var msnry; 

    imagesLoaded(grid, function() { 
    // init Isotope after all images have loaded 
    msnry = new Masonry(grid, { 
     itemSelector: '.grid-item', 
     columnWidth: '.grid-sizer', 
     percentPosition: true 
    }); 
    }); 

}); 
</script>