Question

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

然而，它似乎并没有真正做任何事情，只是堆叠每个项目并给它一个25％的宽度。我已经完成了入门步骤，但似乎这没有做任何事情？

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

Answer 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属性之后省略逗号。

Masonry.js只能垂直输出并具有display：block;

1 个答案: