Question

突然间的砌体只是向我展示了一栏

暂时搞砸这个，它会是什么？浮动：项目左侧不能解决问题，明显留下空隙。

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

尝试添加对超时中包含的'layout'的调用：

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

您可以调整1000的值。如果它不起作用，请尝试将其设置为更大（2000，然后是3000 ......）;或者如果确实有效，请尝试将其缩小，直至再次破裂。

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

你在使用tumblr模板吗？（有些代码看起来像Tumblr）。如果是这样，您可能会发现此问题很有用或者如果没有，这个Q与使用infiniteScroll和Masonry的Tumblr模板有关，所以无论如何它都可以帮助！

Images loaded JavaScript - Using jQuery Masonry

有一些关于砌体布局和Tumblr的想法，最后接受的答案是我建议的超时！

js砌体卡在一列无限滚动

1 个答案: