javascript - Masonry＆LazyLoad不想一起工作

我正在为摄影师建立一个网站。它应该使用Bootstrap 3框架构建，并且他想要一个砖石结构，一页上可容纳400张以上的图像。为此，LazyLoad是必须的。我现在花了几天时间尝试让LazyLoad与Desandros Masonry一起使用，但是没有成功。

我已经尝试了所有使用Google搜索的示例，但是大多数帖子/站点/论坛只是重定向您，或者复制了以下stackoverflow答案:
Combining LazyLoad and Jquery Masonry

我尝试过两种方法，但不幸的是，除了白发外我什么都没有。

这是我正在处理的页面的简化实时版本:
http://nr.x10.mx
在此示例中，我在页面加载中添加了淡入功能，但由于可以使用LazyLoad，因此省略了它。

这是下面的FIDDLE

var container = document.querySelector('#ms-container');
imagesLoaded( container, function()
{
   var msnry = new Masonry(container,
                                     { itemSelector: '.ms-item',
                                       columnWidth: '.ms-item',});
});

您也可以在此处下载整个软件包，包括jquery.lazyload.js HERE

任何帮助将不胜感激

更新

在这里，您可以有4个不同示例，说明发生的不同问题。
我也很高兴地发现Bootstrap .img-responsive类正在干扰LazyLoad。

1 - Masonry without LazyLoad

2 - Masonry and Lazyload - Masonry breaks down and LazyLoad has no effect

3 - LazyLoad without Masonry - LazyLoad has no effect

4 - LazyLoad without Masonry and Bootsrap "img-responsive" removed
5 - Masonry & LazyLoad using first method of SO answer mentioned above
6 - Masonry & LazyLoad using second method of SO answer mentioned above最后两个都给出以下错误:[错误] TypeError:'undefined'不是一个函数(评估'$ container.imagesLoaded')
全局代码(5.html，第110行)

更新了zip HERE

再次感谢您的协助。

最佳答案

我使用发布在fiddle上的SO link的javascript文件(由Nathan Do回答)来使您的5.html正常工作。因此，您可能只是脚本的版本错误。

该页面上链接的脚本为:http://cdn.jsdelivr.net/masonry/2.1.08/jquery.masonry.min.js和http://cdn.jsdelivr.net/jquery.lazyload/1.8.4/jquery.lazyload.js
这是使用该页面的方法更新的原始 fiddle :http://jsfiddle.net/L9RLe/

关于javascript - Masonry＆LazyLoad不想一起工作，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21434218/