javascript - Masonry & LazyLoad 不想一起工作

Question

我正在为摄影师建立一个网站。它应该使用 Bootstrap 3 框架构建，他想要一个页面上有超过 400 个图像的砌体。为此工作 LazyLoad是必须的。我现在花了几天时间试图获得 LazyLoad与Desandros Masonry一起工作但没有成功..

我已经尝试了通过谷歌搜索找到的所有示例，但大多数帖子/站点/论坛只是将您重定向，或者复制了这个 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
最后两个都给出了以下错误:[Error] TypeError: 'undefined' is not a function (evaluating '$container.imagesLoaded') 全局代码(5.html，第 110 行)

已更新 zip HERE

再一次，我们将不胜感激任何帮助，谢谢

Answer 1

我使用 fiddle 的 javascript 文件使你的 5.html 工作。出现在 SO link 上你发帖了，由 Nathan Do 回答.所以您可能只是使用了错误版本的脚本。

该页面上链接的脚本是: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/