时间戳

首页 > 解决方案 > 在保留可变高度的同时合并 CSS 网格

html - 在保留可变高度的同时合并 CSS 网格

问题描述

所以我有一组可变高度的图像，我将它们显示在一个三列 CSS 网格中——结果看起来像这样

大熊

请注意顺序编号以及较长的图像可以占用更多列的高度，但宽度是固定的

我知道实现这一点的唯一方法是使用类似

<div class="grid">
    <div class="col">
        <div class="bear">...</div>
        <div class="bear">...</div>
        <div class="bear">...</div>
    </div>
    <div class="col">
        <div class="bear">...</div>
        <div class="bear">...</div>
        <div class="bear">...</div>
    </div>
    <div class="col">
        <div class="bear">...</div>
        <div class="bear">...</div>
        <div class="bear">...</div>
    </div>
</div>

这工作得很好，但我想让它响应 - 具体来说，这样卡片就可以按顺序堆叠在一个列中。我不知道该怎么做。通常我会按行排列元素，然后压缩到单列很容易，但如果我按行排列，我不会得到动态高度效果。此外，我可以将这些列中的每一列堆叠在一起，但这样我就失去了熊的顺序性。

关于我能做什么的任何想法？

编辑：还要注意，我希望高度是动态的——我不应该手动指定每个单元格的高度

标签： htmlcsscss-grid

解决方案

不幸的是，这里没有任何神奇的 CSS 属性可以实现您正在寻找的东西。但我能想到几个选择：

实现一个 JavaScript 库

您最好的选择可能是实现一个 JavaScript 库。有几个现有的库是为了实现您正在寻找的这种精确的级联网格布局而构建的。

这里有几个选项：

  1. 石工
  2. 同位素

使用 JavaScript/jQuery 重新排序元素

另一种选择是使用 JavaScript 在移动设备上重新排序元素。这将允许您使用列在桌面上显示您的元素，而在移动设备上，您可以手动重新排序它们。

使用此堆栈溢出问题的答案作为指南，您可能可以执行以下操作（使用 jQuery）：

// when window is resized
$(window).on("resize", function() {
    // if width is less than 480px
    if ($(this).width() < 480) {
        // reorder elements
        var wrapper = $('.grid'), 
            items = wrapper.children('.bear'),
            arr = [11, 8, 10, 7, 9, 6];

        wrapper.append( $.map(arr, function(v){ return items[v] }) );
    }
});

如果您的布局更新，您必须确保将每只新熊添加到此脚本中，因此如果频繁添加熊，这可能会很烦人。

在移动设备上显示单独的网格

您还可以为移动设备创建一个完全独立的网格元素。然后，在移动设备上，您可以隐藏桌面网格并显示移动网格：

/* hide mobile grid by default */
.grid--mobile {
  display: none;
}

@media only screen and (max-width: 480px) {
  /* display mobile grid */
  .grid--mobile {
    display: block;
  }
  
  /* hide desktop grid */
  .grid--desktop {
    display: none;
  }
}
<div class="grid grid--desktop">
    <div class="col">
        <div class="bear">...</div>
        <div class="bear">...</div>
        <div class="bear">...</div>
    </div>
    <div class="col">
        <div class="bear">...</div>
        <div class="bear">...</div>
        <div class="bear">...</div>
    </div>
    <div class="col">
        <div class="bear">...</div>
        <div class="bear">...</div>
        <div class="bear">...</div>
    </div>
</div>

<div class="grid grid--mobile">
    <div class="col">
        <div class="bear">...</div>
        <div class="bear">...</div>
        <div class="bear">...</div>
        <div class="bear">...</div>
        <div class="bear">...</div>
        <div class="bear">...</div>
        <div class="bear">...</div>
        <div class="bear">...</div>
        <div class="bear">...</div>
    </div>
</div>

然而，这是多余的，因为它会导致在 HTML 中重复相同的元素两次。

推荐阅读