jquery - 为什么同位素不填满这个简单布局中的行？

Question

我有一个简单的布局——三个彩色框在代码中一个接一个地跟在后面，所有这些框都设计为填充一个固定宽度的 div。为什么同位素不把蓝色盒子放在绿色盒子旁边？我的目标是让所有的盒子尽可能多地填满空间。

代码非常简单:

<style>
.video {
    width:435px;
    height:265px;
    margin:20px;
    background-color:yellow;
}
.tweet {
    width:200px;
    height:165px;
    background-color:green;
}
.post {
    width:206px;
    height:260px;
    background-color:blue;
}
#iso {
    width:970px;
    border:solid 1px red;
}
</style>

<div id='iso'>
    <div class='b video'></div>
    <div class='b tweet'></div>
    <div class='b post'></div>
    <div class='b video'></div>
    <div class='b tweet'></div>
    <div class='b post'></div>
    <div class='b video'></div>
    <div class='b tweet'></div>
    <div class='b post'></div>
</div>

$(function () {
    $('#iso').isotope({
        itemSelector: '.b',
        layoutMode: 'masonry'
    });
});

可以在这里随意使用它:

http://jsfiddle.net/pnoeric/Jn3UX/4/

Answer 1

尝试使用:

$('#iso').isotope({
    itemSelector: '.b',
    layoutMode: 'fitRows'
});

我认为这就是您要达到的效果。

fiddle :http://jsfiddle.net/Jn3UX/5/