html - 跨越多行 + 列的动态网格图块

Question

如果没有看到结果，这可能很难解释，所以请看一下这些示例：

JSFiddle 示例 1 - 看起来不错
 JSFiddle 示例 2 - 损坏

小提琴的代码：

HTML：

<ul id="homepage-grid">
        <li id="tile11" class="col1 row1 sizex1 sizey1">
            <a href="#" title="test">
                <img src="http://placehold.it/295x160" alt="test" title="test" style="width: 295px;height: 160px" />
            </a>
        </li>
        <li id="tile8" class="col2 row1 sizex2 sizey1 last">
            <a href="#" title="test">
                <img src="http://placehold.it/602x160" alt="test" title="test" style="width: 602px;height: 160px" />
            </a>
        </li>
        <li id="tile1" class="col1 row2 sizex1 sizey1">
            <a href="#" title="testing">
                <img src="http://placehold.it/295x160" alt="testing" title="testing" style="width: 295px;height: 160px" />
            </a>
        </li>
        <li id="tile4" class="col2 row2 sizex2 sizey1 last">
            <a href="#" title="test3">
                <img src="http://placehold.it/602x160" alt="test3" title="test3" style="width: 602px;height: 160px" />
            </a>
        </li>
        <li id="tile10" class="col1 row3 sizex1 sizey2">
            <a href="#" title="test">
                <img src="http://placehold.it/295x332" alt="test" title="test" style="width: 295px;height: 332px" />
            </a>
        </li>
        <li id="tile12" class="col2 row3 sizex1 sizey2">
            <a href="#" title="test">
                <img src="http://placehold.it/295x332" alt="test" title="test" style="width: 295px;height: 332px" />
            </a>
        </li>
        <li id="tile2" class="col3 row3 sizex1 sizey1 last">
            <a href="#" title="testing2">
                <img src="http://placehold.it/295x160" alt="testing2" title="testing2" style="width: 295px;height: 160px" />
            </a>
        </li>
        <li id="tile9" class="col3 row4 sizex1 sizey1 last">
            <a href="#" title="test">
                <img src="http://placehold.it/295x160" alt="test" title="test" style="width: 295px;height: 160px" />
            </a>
        </li>
    </ul>

CSS：

#homepage-grid {
    width:910px;
    position:relative;
    padding:0;
    overflow: hidden;
}

#homepage-grid li {
    list-style:none;
    float:left;
    padding:0 12px 12px 0;
    display:block;
}

#homepage-grid li.last {
    list-style:none;
    float:left;
    padding:0 0 12px 0;
}

#homepage-grid li a {
    display:block;
}

基本上我想要创建的是一个动态网格，它由一个数据库填充（数据库部分目前工作正常）。在网格中，每个图块最多可以跨越 3 列宽，但是可以跨越无限行，这似乎是我遇到问题的地方。

对于如此动态的东西，我在使用 HTML/CSS 时遇到了麻烦。如您所见，从示例 1 到示例 2 的一个小变化，它破坏了大部分网格，因为左下方的瓷砖应该向上推以填充空间，而右侧的瓷砖应该向上移动以填充该空间。

但是，我可以完全控制代码，因此 HTML/CSS 可以根据需要进行更改（即添加类/内联样式/等）。

我想这可以（相对）轻松地使用表格，但由于它不是表格内容，我真的不想走这条路。

有没有办法让 CSS 变得如此动态？
我需要使用更多的内联样式来实现这一点吗？
我应该以另一种方式来做，例如绝对定位而不是浮动？

任何有关如何实现这一目标的帮助将不胜感激。

score 2 · Accepted Answer

我的第一个想法只是将 of 设置height为#title12，160px但如果它下面的元素相同，这将不起作用width。

相反，您可以尝试以下方法：

假设网格的每个“行”都有固定的高度，用一个<div>...</div>或类似的块元素包裹它height:160px;（或任何合适的大小，但每个div“行”都一样）。

用第一行图像填充第一行。对于第二行（和后续行），确定每个“单元格”是否与之前的行重叠。如果是这样，请添加一个由空块元素组成的“填充”块，该块元素具有height并width等于您想要的行和列大小。

这允许<li>...</li>项目将div“行”溢出到下面的行中（因为visible默认设置为溢出）。空块元素防止下一行与前一行的溢出重叠。

这种方法的缺点是：

它使您的 HTML 有点难看。
它可能太像一张桌子，而不是真正的桌子值得使用。
这将需要在服务器端进行一些额外的工作。

编辑：此外，<div>不允许在列表中，因此您需要在每一行中启动/停止列表。或者，也许使用<ul> </ul>as rows 而不是<div>.

score 1 · Accepted Answer

好吧，这只是一个想法。假设您最多有 3 列和固定的行高，您可以通过数组存储每列的超出行数，然后添加一个负边距顶部或一个类以“拉起”特定数量的行。例如：

在开始时，每列的行池是[0][0][0]在添加一个 2 行项目之后[2][0][0]添加两个具有 3 和 2 行高度[2][3][2] 的项目，我们将放置下一个项目应该放在第一个最短的列中并且将被最大减去最短的差值拉起，在本例中为一列 (3 - 2)，如果添加的元素是 2 行高，则池将是[5][3][2]下一个项目将被放在最右边的列中，并且将是拉起 3 行 (5 - 2)。

就这样！乍一看，它似乎可以工作，但我还没有对其进行足够的测试。

score 1 · Accepted Answer

你会遇到浮点数的这个问题。但是，您可以更改该页面上某个元素的位置，一切都会如您所愿。

更新小提琴

将以下内容添加到您的 CSS 中：

#homepage-grid li#tile10 {
    position: absolute;
    top: 342px;
}

这将有问题的元素从文档流中分离出来，从而消除了由应用于其余列表项的“浮动”分配给它的垂直空间的保留。最后一项是向右浮动的，因此不会与绝对定位的图块重叠。

编辑

根据下面的评论，这是一种更灵活的方法。该示例适用于发布的代码。

使用更新的小提琴做出的假设：

sizex1、sizey1、sizex2 等...是常数值
这些右侧的内容将向右浮动（对于左侧浮动的项目，这将反向工作，但这些场景似乎不会成为问题，因为如果左侧的元素是，右侧的项目将正确浮动垂直更大）
用户有能力覆盖样式，或在创建布局时应用样式这主要是为了控制position: absolute不必要地应用于某些元素

这是做什么的：

该 CSS 根据具有某些类的兄弟姐妹的存在设置不同的规则。这就是为什么sizex1 sizex2 sizey1和sizey2值的恒定性很重要。

CSS：

#homepage-grid li.col1:not(.row1):not(.row2) {
    position: absolute;
}
#homepage-grid li.col1.sizey1.row1 ~ li.col1.row2 { /* The first column of the first row has a sizey of 1 */
    top: 172px;
}
#homepage-grid li.col1.sizey2.row1 ~ li.col1.row2{ /* The first column of the first row has a sizey of 2 */
    top: 342px;
}
#homepage-grid li.col1.sizey1.row1 ~ li.col1.sizey1.row2 ~ li.col1.row3 { /* The first column of the first row has a sizey of 1 and the first column of the first row has a sizey of 1 */
    top: 344px;
}
#homepage-grid li.col1.sizey2.row1 ~ li.col1.sizey2.row2 ~ li.col1.row3{ /* The first column of the first row has a sizey of 2 and the first column of the second row has a sizey of 2 */
    top: 684px;
}
#homepage-grid li.col1.sizey2.row1 ~ li.col1.sizey1.row2 ~ li.col1.row3,
#homepage-grid li.col1.sizey1.row1 ~ li.col1.sizey2.row2 ~ li.col1.row3 { /* The first column of the first row has a sizey of 2 and the first column of the second row has a sizey of 1, or vice versa */
    top: 514px;
}

理想情况下，您希望#homepage_grid li.col1在页面交付时设置该值。这样，您可以选择从文档流中分离出哪些图块以保持正确的间距。我通常会通过使用:not()选择器来完成此操作，但如果您正在寻找旧版浏览器兼容性，您可以轻松地使用覆盖。

例子：

#homepage-grid li.col1:not(.row1):not(.row2) {
    position: absolute;
}

*以上内容只会破坏文档流中的第 3 行和更大行。

#homepage-grid li.col1 {
  position: absolute;
}
#homepage-grid li.col1.row1, #homepage-grid li.col1.row2 {
  position: static;
}

这完成了与上面相同的事情，但更冗长。但是，它将在不符合标准的浏览器中适当呈现。

编辑 2 为清楚起见，这是一个使用 jQuery 在页面加载时将适当元素设置为静态的示例。

另一个小提琴示例

score 0 · Accepted Answer

您需要有一个允许嵌套的网格系统。

然后在网格布局中搜索整行。

然后在每一行中搜索完整的列，依此类推。

score -1 · Accepted Answer

-1

我真的会推荐使用像Masonry这样的 JavaScript 插件。

于 2013-03-06T21:37:24.387 回答

html - 跨越多行 + 列的动态网格图块

5 回答 5

Related

Reference