image - 如何编写复杂的响应式图像网格

Question

我遇到过这种适用于桌面/平板电脑和移动设备的布局(见下图)，我需要为客户完成，但我发现这是不可能的。我想过使用 flex grid，但我的客户希望它与 IE9 兼容，这让我无法使用 flex 作为解决方案。

有没有一个我可以实现的不太重的框架，或者我可以在没有框架的情况下只用 css/3 来实现吗？

如有任何建议和帮助，我们将不胜感激，谢谢。

Answer 1

Masonry和 Salvattore (支持 IE9+)是这些东西的已知代码库，并且有很多内置选项，我下面的示例没有，所以制作你自己的或使用现有的，很大程度上取决于你想用它做什么。

可以通过添加脚本和/或以稍微不同的方式将各部分彼此链接起来，使该版本响应更快，但在这样做之前，需要更清楚地了解当屏幕空间缩小时布局应如何操作。

position: absolute 版本

html, body {margin: 0; height: 100%; }

.container {
  left: 0;
  top: 0;
  height:100%;
  max-height:100%;
  width:100%;
  position: absolute;
  box-sizing: border-box;
}

.header{
  background-color: teal;
  height:30%;
  position: relative;
  box-sizing: border-box;
  border: 3px solid white;
}

.wrapper {
  height:80%;
  position: relative;
  box-sizing: border-box;
  padding-bottom: 80%;
}

.section {
  position: absolute;
  box-sizing: border-box;
  border: 3px solid white;
}

.section.nr1 {
  background-color: green;
  left: 0;
  top: 0;
  height:66.6%;
  width:33.3%
}
.section.nr2 {
  background-color: purple;
  left: 33.3%;
  top: 0;
  height:33.3%;
  width:66.6%
}
.section.nr3 {
  background-color: orange;
  left: 33.3%;
  top: 33.3%;
  height:33.3%;
  width:33.3%
}
.section.nr4 {
  background-color: red;
  left: 0;
  top: 66.6%;
  height:33.3%;
  width:66.6%
}
.section.nr5 {
  background-color: gray;
  left: 66.6%;
  top: 33.3%;
  height:66.6%;
  width:33.3%
}

@media screen and (max-width: 600px) {

  .wrapper {
    padding-bottom: 20%;
  }
  .section.nr1,
  .section.nr2,
  .section.nr3,
  .section.nr4 {
    position: relative;
    left: auto;
    top: auto;
    height: 50%;
    width: 50%;
    float: left;
  }
  .section.nr5 {
    position: relative;
    left: auto;
    top: auto;
    height: 50%;
    width: 100%;
    float: left;
  }
}

<div class="container">
    <div class="header"></div>
    <div class="wrapper">
        <div class="section nr1"></div>
        <div class="section nr2"></div>
        <div class="section nr3"></div>
        <div class="section nr4"></div>
        <div class="section nr5"></div>
    </div>
</div>

如果您不想(或不能)使用脚本，旧的 table 可以成为您的 friend ，因为使用它很容易实现这种布局。但请注意，通常不应使用 table 进行布局。

使用它的好处是它会随着内容的增加而增长，而 position: absolute 版本不会。

table 版本(仅显示 5 部分布局)

html, body {margin: 0; height: 100% }

.tbl {
  border-collapse:collapse;
  border-spacing:0;
  width: 50vw;
  height: 50vw;
}

.tbl td {
  padding:10px 5px;
  border: 1px solid;
  box-sizing: border-box;
  vertical-align:top
}

.section.nr1 {
  background-color: green;
}
.section.nr2 {
  background-color: purple;
}
.section.nr3 {
  background-color: orange;
}
.section.nr4 {
  background-color: gray;
}
.section.nr5 {
  background-color: red;
}

@media screen and (max-width: 600px) {

  .tbl {
    width: 90vw;
    height: 90vw;
  }

  .section.nr1,
  .section.nr2,
  .section.nr3,
  .section.nr4 {
    position: relative;
    left: auto;
    top: auto;
    height: 30vw;
    width: 50%;
    float: left;
  }
  .section.nr5 {
    position: relative;
    left: auto;
    top: auto;
    height: 30vw;
    width: 100%;
    float: left;
  }
}

<table class="tbl">
  <tr>
    <td class="section nr1" rowspan="2"></td>
    <td class="section nr2" colspan="2"></td>
  </tr>
  <tr>
    <td class="section nr3"></td>
    <td class="section nr4" rowspan="2"></td>
  </tr>
  <tr>
    <td class="section nr5" colspan="2"></td>
  </tr>
</table>