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

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，但你自己只有grid_4类，我可以看到一个id。