mmasonry.pkgd.js:62 无法在初始化之前调用砌体上的方法;试图呼叫 'reload'
mmasonry.pkgd.js:62 cannot call methods on masonry prior to initialization; attempted to call 'reload'
问题
我应该如何修改我的脚本来初始化 Masonry,或者重新安排我的脚本的顺序。
背景
我在我创建的其他网站上也遇到过类似的问题,但目前在我正在构建的 Tumblr 主题上有它
http://divedemo.tumblr.com/
我正在测试主题。错误的结果是图像堆叠得太近了。我之前的研究表明,这是由于盒子没有设定高度。但是我目前找到的解决方案不考虑响应式网站。
我进入控制台查看发生了什么
mmasonry.pkgd.js:62 cannot call methods on masonry prior to initialization; attempted to call 'reload'
错误(截图)
Javascript
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.0/imagesloaded.pkgd.min.js"></script>
<script>
$(document).ready(function() {
// Initialize Masonry
$('#content').masonry({
columnWidth: 320,
itemSelector: '.item',
isFitWidth: true,
isAnimated: !Modernizr.csstransitions
}).imagesLoaded(function() {
$(this).masonry('reload');
});
});
</script>
试试这个,
$(document).ready(function() {
$('#content').imagesLoaded(function() {
$('#content').masonry({
columnWidth: 320,
itemSelector: '.item',
isFitWidth: true
})
});
});
问题
我应该如何修改我的脚本来初始化 Masonry,或者重新安排我的脚本的顺序。
背景
我在我创建的其他网站上也遇到过类似的问题,但目前在我正在构建的 Tumblr 主题上有它 http://divedemo.tumblr.com/
我正在测试主题。错误的结果是图像堆叠得太近了。我之前的研究表明,这是由于盒子没有设定高度。但是我目前找到的解决方案不考虑响应式网站。
我进入控制台查看发生了什么
mmasonry.pkgd.js:62 cannot call methods on masonry prior to initialization; attempted to call 'reload'
错误(截图)
Javascript
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.0/imagesloaded.pkgd.min.js"></script>
<script>
$(document).ready(function() {
// Initialize Masonry
$('#content').masonry({
columnWidth: 320,
itemSelector: '.item',
isFitWidth: true,
isAnimated: !Modernizr.csstransitions
}).imagesLoaded(function() {
$(this).masonry('reload');
});
});
</script>
试试这个,
$(document).ready(function() {
$('#content').imagesLoaded(function() {
$('#content').masonry({
columnWidth: 320,
itemSelector: '.item',
isFitWidth: true
})
});
});