jQuery 砌体不工作我不知道出了什么问题

Question

我不知道我的代码有什么问题，但砌体似乎不起作用。有人帮忙！这是我得到的代码。

<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;
}

Answer 1

您的选择器中的 ID 有误？你有。 (class)

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

Answer 2

您需要解决许多问题。首先，使用 masonry 时需要非常具体地加载 typekit，并且它在控制台中显示错误。请参阅 here for instructions 修复它。二、"isAnimated"目前masonry版本没有使用，所以使用transitionDuration:

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

第三，不要把上面的代码放在你的#feed_containerdiv里面。如果可能，脚本应放在页面末尾。

Answer 3

我找到了problem/solution！在循环之后，我必须在将项目加载到网格容器的同一函数中加载砌体代码！

感谢大家的贡献。

jQuery 砌体不工作我不知道出了什么问题

jQuery Masonry not Working I can't figure out what's wrong

jquery

jquery-masonry

masonry