Masonry&LazyLoad不想一起工作

Question

我正在为摄影师建立一个网站.它应该使用Bootstrap 3框架构建,并且他希望在一个页面上拥有超过400个图像的砖石.为了工作,LazyLoad是必须的.我现在花了几天时间试图让LazyLoad与 Desandros Masonry合作,但没有成功..

我已经尝试了所有人发现谷歌搜索的例子,但大多数帖子/网站/论坛只是重定向你,或者已经复制了这个stackoverflow答案: 组合LazyLoad和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

任何帮助将受到高度赞赏

UPDATE

在这里,您可以找到4个不同问题的不同示例.我也很高兴Bootstrap .img-responsive类干扰了LazyLoad.

1 - 没有
LazyLoad 2的砌体 - 砌体和Lazyload - 砌体破坏而LazyLoad没有效果
3 - LazyLoad没有砌体 -
LazyLoad 没有效果4 - LazyLoad没有砌体和Bootsrap"img-responsive"删除
5 - Masonry&LazyLoad使用第一种方法上面提到的SO答案
6 - Masonry&LazyLoad使用上面提到的SO答案的第二种方法
最后两种方法都给出了以下错误:[错误] TypeError:'undefined'不是一个函数(评估'$ container.imagesLoaded')全局代码(5.html,第110行)

这里更新了拉链

再次,任何asisstance将非常感谢,谢谢

Answer 1

我使用你发布的SO链接上的小提琴的javascript文件制作你的5.html作品,由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

这是您使用该页面方法更新的原始小提琴:http://jsfiddle.net/L9RLe/