Masonry jQuery插件不为我工作 [英] Masonry jQuery plugin not working for me

问题描述

我似乎无法获得masonry插件的工作，我已经尝试了几个小时现在..
我没有任何javascript错误。
这是我的代码（现在，不仅在基础，甚至在文档页面上）

HTML：

 < div class =container> 
 
< div class =item>< / div> 
< div class =itemstyle =height：320px;>< / div> 
< div class =item>< / div> 
< div class =itemstyle =height：300px;>< / div> 
< div class =item>< / div> 
< div class =item>< / div> 
< div class =item>< / div> 
< div class =item>< / div> 
< div class =item>< / div> 
< div class =item>< / div> 
 
 
< / div> 
< script type =text / javascriptsrc =js / jquery.js>< / script> 
< script type =text / javascriptsrc =js / jquery.masonry.min.js>< / script> 
< script type =text / javascript> 
 $（function（）{
 $（'＃container'）。masonry（{
 // options 
 itemSelector：'.item'，
}）; 
}）; 
< / script> 
  

CSS：

 code> body {
 margin：0; 
 padding：0; 
 width：1310px; 
 margin：0 auto; 
 background-color：＃212121; 
} 
 .container {
 width：1302px; 
 margin：0 auto; 
 position：absolute; 
} 
 .item {
 width：220px; 
 height：200px; 
 margin：10px; 
 float：left; 
 background-color：#fff; 
 padding：10px; 
 border-radius：5px; 
} 
  

任何帮助都非常感谢，

谢谢。

解决方案

  $（'＃container'）。 masonry（{//没有元素在dom中id = container 
 // options 
 itemSelector：'.item'，
}）; 
  

您的css选择器是错误的。你解决它为 #container 它指的是id，但没有指定的id在该元素，只有一个类 .container

将选择器更改为 $（'。container'）或添加 id 属性（即< div id =container>

I can't seem to get masonry plugin to work, i have tried for hours now.. I don't have any javascript errors. This is my code (now, not only at the basics but even like on the documentation page)

HTML:

<div class="container">

<div class="item"></div>
<div class="item" style="height:320px;"></div>
<div class="item"></div>
<div class="item" style="height:300px;"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>


</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.masonry.min.js"></script>
<script type="text/javascript">
    $(function(){
    $('#container').masonry({
        // options
        itemSelector : '.item',
    });
});
</script>

CSS:

body {
margin: 0;
padding: 0;
width: 1310px;
margin:0 auto;
background-color: #212121;
}
.container {
width: 1302px;
margin: 0 auto;
position: absolute;
}
.item {
width: 220px;
height: 200px;
margin: 10px;
float: left;
background-color: #fff;
padding: 10px;
border-radius: 5px;
}

Any help is much appreciated,

Thank you.

解决方案

$('#container').masonry({ //no element in the dom with id=container
    // options
    itemSelector : '.item',
});

Your css selector is wrong. You're addressing it as #container which refers to the id, but there is no id specified on that element, only a class .container

Either change the selector to $('.container') or add an id attribute (i.e. <div id="container"> and you should be good to go.

这篇关于Masonry jQuery插件不为我工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！