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

Question

我已经遇到过桌面/平板电脑和手机的这种布局（见下图）我需要为客户完成，我发现无法做到。我想过使用flex网格，但是我的客户希望它与IE9兼容，这阻止了我使用flex作为解决方案。

那里有一个框架，它不会太重，我可以实现，或者我可以在没有css / 3框架的情况下做到这一点吗？

任何建议和帮助将不胜感激，谢谢。

Answer 1

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

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

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可以成为您的朋友，因为很容易使用该布局。但请注意，通常不应使用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>