Question

我正在编写一个schedule-ish应用程序，其中我将列作为人员，行作为间隔（30分钟）。

我需要一个背景图案：背景必须每30分钟有一条水平线，每隔一小时就有一条直线。

整张桌子的高度不固定，取决于屏幕分辨率的高度，所以使用背景图片是不可能的，至少我是这么认为的。

我需要将div放在列的顶部，因为它们的高度和位置不固定。我需要7X48表，但问题是我实际上不需要表，因为我不能使用它的行，因为我的单元格没有固定的高度，甚至可能甚至覆盖。

有没有什么方法可以用7个div作为列来完成我的目标，但仍然有我的背景模式而不使用表格？

如果我能做到这一点，我想我会省去DOM，因为当我只需要7时，我创建了超过336个节点。

修改

jsfiddle.net/Qufzm - 这是我背景图案的简化版本。我想使用float：left和可能的避免表

只使用列div来实现相同的效果

Answer 1

Masonry（jQuery插件）可能很有用。

假设我有以下html：

<div id="container">
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
</div>

Javascript可用于控制列宽和高度以及许多其他选项。

JS代码：

$(function() {
    $('#container').masonry({
        // options
        itemSelector: '.item',
        columnWidth: 100,
        isAnimated: true
    });
});

示例fiddle。查看砌体网站的demos。

动态改变div的背景模式

1 个答案: