javascript - 使用css自动排列元素

Question

我有一个应用程序，我有点卡住了。我创建了一个小部件，它需要以需要自动放置的方式放置。例如：

我在页面上有这样的东西，现在最初所有这些都安排得很好（水平对齐），但只要其中一个组件的大小发生变化，例如：

变成这样。我想要的是它自动调整以消耗空白空间。

我使用 css 使其浮动：左并显示：块，通过它我可以水平对齐每个组件，但我仍然无法利用页面上的空间。

任何帮助表示赞赏

Answer 1

仅 CSS 的解决方案：

假设您希望每行有 3 个“连接”项，这应该是您的 CSS：

#wrapper{
    -moz-column-count: 3;
    -moz-column-gap: 1em;
    -webkit-column-count: 3;
    -webkit-column-gap: 1em;
    column-count: 3;
    column-gap: 1em;
}
.itm{
    display:inline-block;
    width:100%;
    border-top:1px solid red;
    border-bottom:1px solid red;
    margin-bottom:1em;
}
.itm:nth-child(3n+1){
    clear:left;
}

这是你的 HTML

<div id="wrapper">
    <div class="itm">
        <h1>connections a</h1>
        <div class="info">
            <span class="label">server</span>
            <span class="value">100</span>
        </div>
    </div>
    [... copy paste as many "itm"s as you need]
</div>

在这里看到一个“点击添加更多项目”的小提琴来查看结果——旧的——http: //jsfiddle.net/5FsLm/——旧的——

更新的小提琴http://jsfiddle.net/c2nkn/

Answer 2

这绝对是jQuery Masonry的完美案例。该插件可以自动排列列，以便它们可以组合在一起。像这样的东西：

html

<div id="wrapper">
    <div id="list">
        <div class="item"> ... </div>
        <div class="item"> ... </div>
        <div class="item"> ... </div>
        <!-- ... -->
    </div>
</div>

jQuery

$(window).load(function(){
    $('#list').masonry({
        itemSelector: '.item'
    });
});

PS：目前官网不知什么原因下线了，我这里放一个临时链接。

---

更新：jQuery Masonry 的临时链接（实际上来自 cutestpaw.com，它有一个本地副本，所以如果你想测试它，你应该复制文件而不是链接到它）

Answer 3

如果我对您的理解正确，看起来您真正想要的是这些小部件的三列结构。在这种情况下，它看起来像这样。

HTML

<div class='three-column'>
    <div class="widget">...</div>
    <div class="widget">...</div>
    <div class="widget">...</div>
</div>
<div class='three-column'>
...
</div>
<div class='three-column'>
...
</div>

CSS

.three-column {
    width: 30%;
    padding-right: 3%;
    float: left;
}

更新：http : //jsfiddle.net/cBgj4

Answer 4

如果您不想要太多动画并且需要一个非常容易理解并满足您的目的的脚本，请尝试 jquery.popbild.js。

您可以从以下网址下载项目：http: //funscripts.popbild.com/jquery_popbild/

它主要用于将元素以 pinterest 样式排列为三列（使用三个分区）