为什么砌体在这个例子中不起作用？

Question

http://codepen.io/donnaloia/pen/aderB

砌体似乎没有在网格布局中组织div。我做错了什么？

$(document).ready(function() {
  $('.container').masonry({
   itemSelector: '.grid_4',
   isFitWidth: true,
   gutter: 8
  }).imagesLoaded(function() {
   $('.container').masonry('reloadItems');
  });

new AnimOnScroll( document.getElementById( '#grid_4' ), {
        minDuration : 0.4,
        maxDuration : 0.7,
        viewportFactor : 0.2
      } );

});

Answer 1

您没有加载masonry.js和imagesloaded.js，因为链接不正确。

以下是一个工作示例codepen  一些更新的代码

 $(document).ready(function() {
  $('.container').imagesLoaded(function() {
  $('.container').masonry({
   itemSelector: '.grid_4',
   isFitWidth: true,
   gutter: 8
  });

  });

new AnimOnScroll( document.getElementById( '#grid_4' ), {
        minDuration : 0.4,
        maxDuration : 0.7,
        viewportFactor : 0.2
      } );

});

另外，你的AnimOnScroll使用了grid_4的id，但你只能看到grid_4的类。