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

我认为这是你想要达到的效果。

小提琴：http: //jsfiddle.net/Jn3UX/5/