[英]jquery Masonry - Not working
Please can someone tell me where I'm going wrong with my jQuery masonry code. 请有人告诉我我的jQuery砌体代码哪里出问题了。 I've posted the link to my test page below:
我已将链接发布到下面的测试页面:
http://davidlloydphotography.com/home.html http://davidlloydphotography.com/home.html
I have followed the step by step guide the Masonry website ( http://masonry.desandro.com/ ). 我已按照循序渐进的方式指导Masonry网站( http://masonry.desandro.com/ )。 I think it might be how I'm initialising the jQuery, not sure where it goes, the tutorial is not clear:
我认为这可能是我初始化jQuery的方式,不确定它的去向,本教程不清楚:
$('.grid').masonry({
// options
itemSelector: '.grid-item',
columnWidth: 700
});
No idea why it won't flow into the layout, the placeholder images just hang to the left :( 不知道为什么它不会流入布局,占位符图像只是挂在左侧:(
Any help would be greatly appreciated I've been at this for days, its got to be a simple problem. 我已经在此工作了好几天了,将不胜感激,这肯定是一个简单的问题。
You should use only one version of jQuery, (not 2 depending on the browser) and put your js at the bottom of the page and load masonry with "document ready". 您应该只使用一个版本的jQuery(而不是2个版本,具体取决于浏览器),并将您的js放在页面底部,并使用“文档就绪”加载砌体。 If you are loading many images, consider using imagesloaded as well.
如果您正在加载许多图像,可以考虑使用imagesloaded为好。
HTML: HTML:
<div id="grid">
<div class="grid-item">
<img src="http://lorempixum.com/200/200/food/1" alt="" />
</div>
<div class="grid-item">
<img src="http://lorempixum.com/200/150/food/10" alt="" />
</div>
<div class="grid-item">
<img src="http://lorempixum.com/200/250/food/3" alt="" />
</div>
</div>
</div>
JS: JS:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.js"></script>
<script>
$(document).ready(function() {
$('#grid').masonry({
// options
itemSelector: '.grid-item',
columnWidth: 700
});
});
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.