我不知道我的代码有什么问题,但砖石似乎没有用。有人帮忙!这是我得到的代码。
<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;
}
答案 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)
我发现了问题/解决方案! 我必须在循环后将项目加载到网格容器中的相同函数中加载砌体代码!
谢谢大家的贡献。