爲什麼砌體在這個例子中不起作用？

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。