jQuery砌体不工作我无法弄清楚什么是错的

时间:2015-08-11 15:16:10

标签: jquery jquery-masonry masonry

the image shows my results after making all the corrections我不知道我的代码有什么问题,但砖石似乎没有用。有人帮忙!这是我得到的代码。

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.1/masonry.pkgd.min.js"></script>

</head>

<body>    

<div id="shule_left_container">


<script>
      $(document).ready(function(){
       $('.shule_left_container').masonry({
          itemSelector:'.shule',
          isAnimated: true,
        });
       });
</script>


<div id="buffer" style="display: none;"></div>
<div class="shule">1</div>
<div class="shule">2</div>
<div class="shule">3</div>
<div class="shule">4</div>
<div class="shule">5</div>
<div class="shule">6</div>
<div class="shule">7</div>
<div class="shule">8</div>
<div class="shule">9</div>
<div class="shule">10</div>
<div class="shule">11</div>
<div class="shule">12</div>
<div class="shule">13</div>

</div>

</body>

//这里是容器和项目的css

 .shule{
width:calc(100% / 4 - 5px);/*off-setting margin length*/
float:left;
margin-bottom:10px;
margin-right:5px;
background:#FFF;
}

#shule_left_container{
width:70%;
float:left;
overflow:hidden;
position:relative;
}

3 个答案:

答案 0 :(得分:0)

选择器中的错误ID?你有 。 (类)

<script>
  $(document).ready(function(){
   $('#shule_left_container').masonry({    // <---- Changed to #shule_left_container
      itemSelector:'.shule',
      isAnimated: true,
    });
   });
</script>

答案 1 :(得分:0)

您需要修复许多问题。首先,在使用砌体时需要非常具体地加载typekit,并且它在控制台中显示错误。有关修复它的信息,请参阅here for instructions。 其次,“isAnimated”未在当前版本的砌体中使用,因此请使用transitionDuration:

  $('#feed_container').imagesLoaded(function(){
            $('#feed_container').masonry({
              itemSelector:'.feed',
              columnWidth:'.feed',
              transitionDuration: '0.2s'
            });
          });

第三,不要将上面的代码放在#feed_container div中。如果可能的话,脚本应该放在页面的末尾。

答案 2 :(得分:0)

我发现了问题/解决方案! 我必须在循环后将项目加载到网格容器中的相同函数中加载砌体代码!

谢谢大家的贡献。