Masonry.js 只垂直输出并且有 display:block;答案

【问题标题】：Masonry.js only outputs vertically and has display:block;Masonry.js 只垂直输出并且有 display:block;
【发布时间】：2014-01-03 16:40:43
【问题描述】：

我已经安装了 Masonry.js 来将我拥有的每个项目创建为网格（随着时间的推移，这些项目将具有不同的高度，因此使用 Masonry）。

但是，它似乎并没有真正做任何事情，只是将每个项目堆叠起来并为其设置 25% 的宽度。我已经完成了入门步骤，但这似乎并没有真正做任何事情？

Live demo

/* Init masonry */
    var container = document.querySelector('#container');
    var msnry = new Masonry( container, {
      // options
      gutter: 10,
      itemSelector: '.item'
    });


<div id="container" class="js-masonry" data-masonry-options='{ "gutter": 10 }'>
      <div class="item"></div>
</div>

【问题讨论】：

“Live Demo”只是给我一个绿色背景
@gtgaxiola 加载需要几秒钟
我刚刚意识到我混淆了 Masonry 和 Isotope isotope.metafizzy.co（这是我过去使用的）来制作网格，但它仅供个人免费使用.. 否则 $25 许可
不幸的是我使用 Masonry.js 而不是同位素

标签： jquery grid jquery-masonry

【解决方案1】：

在您的 ajax 请求完成之前调用 Masonry。在 DOM 中创建所有项目后，该脚本应该运行。您可以通过将其添加到 ajax() 的“完整”属性中来做到这一点。此外，还应指定 columnWidth。

因此，在您的演示页面中，您需要将第 19-25 行向下移动到代码的第 33 行，如下所示：

jQuery(function () {
    $.ajax({
        url: 'http://www.sagittarius-digital.com/news.rss',
        dataType: 'xml',
        complete: function() {
       /* Init Masonry */    
       var msnry = new Masonry( container, {
           // options
           gutter: 10,
           itemSelector: '.item',
          // Add a column width
           columnWidth: 50
        });  
    }
})...

另外，请务必不要遗漏 dataType 属性后面的逗号。

【讨论】：