我正在使用Masonry创建一个布局,它只有两种尺寸可供选择:小尺寸和大尺寸。但是,我创建了一个随机选择,它们没有正确堆叠在一起。
这是我的HTML& JS:
<div class="container">
<div class="featured"></div>
<div class="featured small"></div>
<div class="featured small"></div>
<div class="featured"></div>
<div class="featured small"></div>
<div class="featured small"></div>
<div class="featured"></div>
<div class="featured small"></div>
<div class="featured small"></div>
<div class="featured"></div>
<div class="featured small"></div>
<div class="featured small"></div>
<div class="featured small"></div>
<div class="featured small"></div>
</div>
<script>
docReady( function() {
var $container = $('.container');
$container.imagesLoaded(function(){
$container.masonry({
columnWidth: 225
itemSelector: '.featured'
isFitWidth: true
});
});
});
</script>
这是我的CSS:
.container {
background: #EEE;
width:960px;
margin-bottom:20px;
}
.featured {
width:440px;
height:440px;
margin:10px;
float:left;
background:#09F;
}
.featured.small{
width:210px;
height:210px;
}
如果它与此网站具有相同的效果,我会喜欢它:Zappos Tweet Wall
但我很难掌握这个图书馆的运作方式。
答案 0 :(得分:1)
var $container = $('#container');
$container.masonry({
columnWidth: 110,
itemSelector: '.featured'
});
我认为这是因为你的imagesLoaded
功能。
(另外,可能是因为你的docReady
)