javascript - js 砌体卡在无限滚动的一列中

Question

Masonry 突然只向我显示 1 列

这个问题已经困扰了一段时间了，这会是什么？ float :留在项目上并不能解决问题，明显留下间隙。

$(function(){

  var $container = $('#containermason');

  $container.imagesLoaded(function(){
    $container.masonry({
      itemSelector: '.item',
      columnWidth: '260px'
    });
  });

  $container.infinitescroll({
    navSelector  : '.pagination',    // selector for the paged navigation 
    nextSelector : '.pagination a',  // selector for the NEXT link (to page 2)
    itemSelector : '.item',     // selector for all items you'll retrieve
    loading: {
      finishedMsg: '<p style="background: #82d63e; margin-bottom: 20px; padding: 5px; border-radius: 10px; color: #fff; font-weight: bold;">that\'s all the content</p>',
          img: 'http://i.imgur.com/C1U8WRZ.gif'
      }
    },
    // trigger Masonry as a callback
    function( newElements ) {
      // hide new items while they are loading
      var $newElems = $( newElements ).css({ opacity: 0 });
      // ensure that images load before adding to masonry layout
      $newElems.imagesLoaded(function(){
        // show elems now they're ready
        $newElems.animate({ opacity: 1 });
        $container.masonry( 'appended', $newElems, true ); 

      });
 $("abbr.timeago").timeago();
    });

});

容器没有定位到绝对位置或任何东西，我不明白为什么。我整夜都为此感到沮丧。

方框位于部分:

<div class="column-center"  id="main" >
    <div id="containermason" class="js-masonry">

     <%= render :partial => "mypost", :locals => {mypost: mypost}, :collection => mypost %>

    </div>
  </div>

在部分我有项目:

 <div id="streamline"  class="item">

        ...code....

</div>

以及项目的 css:

.item {
       background: #fff; 
       margin: 10px;  
       width: 241px; 
       padding: 2px;  
       border-radius: 10px;

      }

Answer 1

这有点像黑客，但在这行之后:

 $container.masonry( 'appended', $newElems, true ); 

尝试添加对包含超时的“布局”的调用:

 $container.masonry( 'appended', $newElems, true ); 
 window.setTimeout(function() {
      $container.masonry('layout');
 }, 1000);

您可以调整 1000 的值。如果不起作用，请尝试将其调大(2000，然后 3000...)；或者如果它确实有效，请尝试将其变小，直到它再次损坏。

如果此 hack 确实解决了您的问题，则表明页面中加载的内容存在问题。在正确地进行自己的布局之前，Masonry 似乎对加载和布局的所有内容都非常敏感。因此，此技巧可以帮助您诊断问题并提供解决方法，但并不是理想的解决方案。

您正在制作 tumblr 模板吗？ (有些代码看起来像 Tumblr)。如果是这样，您可能会发现这个问题很有用。或者如果没有，这个问题与使用infiniteScroll 和Masonry 的Tumblr 模板相关，所以无论如何它可能会有所帮助!

Images loaded JavaScript - Using jQuery Masonry

有一些与 Masonry 布局和 Tumblr 相关的想法，最终接受的答案是我建议的超时!