masonry - 在 Masonry onload 中重叠

Question

我遇到了典型的砖石溢出问题。我正在尝试加载推特卡片，但在加载时，它们仍然相互重叠。一旦调整屏幕大小，它们就会工作。仅供引用，我肯定有 imageLoad 和 masonry 。我在 Rails 中这样做，所以不确定如何制作 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

我最终通过一些递归解决了我的问题。仅供引用，我不知道这是否是最好的解决方法，但它对我有用。如果有人有任何问题，请提供更好的答案。

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