如何在一个页面中放置不同尺寸的物品,避免它们之间有太多间隙？

Question

我有一组不同大小的矩形,我想把它们放在一起,所以尽可能的间隙很小:

但对于:

<div class="box" >
    <div class="item item-001" ></div>
    <div class="item item-003" ></div>
    <div class="item item-005" ></div>
    <div class="item item-002" ></div>
    <div class="item item-004" ></div>
    <div class="item item-001" ></div>
    <div class="item item-001" ></div>
    <div class="item item-003" ></div>
    <div class="item item-004" ></div>
    <div class="item item-001" ></div>
</div>

和

div.box {
    width: 100%;
    height: 100%;
    display: block;
    border: 1px solid #EEE;
    padding: 3px;
}

div.item {
    display: inline-block;
    border: 1px solid orange;
    margin: 3px;
    width: 100px;
}
div.item-001 {
    height: 100px;
}
div.item-002 {
    height: 150px;
}
div.item-003 {
    height: 50px;
}
div.item-004 {
    height: 250px;
}
div.item-005 {
    height: 350px;
}

这就是我得到的:

有没有办法用普通的CSS来达到这个结果？我想避免使用css3和javascript,我希望结果能够在旧版浏览器上运行.如果那是不可能的,那么我想知道css3是否可行,如果没有,那么我想我会试试javascript.

链接到小提琴:http://jsfiddle.net/hamidsafdari/aa10xzzt/1/

Answer 1

如果你使用 jQuery 并且你不想自己做所有事情，而有人已经使用了，你可以看看这个插件，它可能会帮助你：jQuery Masonry

该插件构建了一个类似于您正在寻找的页面布局。 我知道你要求避免使用 JavaScript，但这样你就可以确保你有一个针对旧版浏览器的后备方案。