Question

我遇到了砖石的经典溢流问题。我正在尝试加载推特卡但是上传，它们仍然相互重叠。一旦屏幕调整大小，它们就可以工作。仅供参考，我肯定有图像载荷和砖石。我在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'
      });
    });
  }
 }

Answer 2

这适用于我，安装了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>

Answer 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

在砌体上重叠

3 个答案: