砌体加载重叠答案

【问题标题】：Overlapping in Masonry onload砌体加载重叠
【发布时间】：2014-10-24 21:49:37
【问题描述】：

我遇到了典型的砌体溢出问题。我正在尝试加载推特卡，但在加载时，它们仍然相互重叠。一旦调整屏幕大小，它们就会起作用。仅供参考，我肯定有 imageLoad 和砖石。我在 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>

【问题讨论】：

标签： masonry

【解决方案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'
      });
    });
  }
 }

【讨论】：

【解决方案2】：

这对我有用，安装了图像加载脚本。

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

【讨论】：

【解决方案3】：

对我来说，小脚本“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

【讨论】：