地铁网格样式

Question

我正在尝试实现类似于以下页面的内容： https://undsgn.com/uncode/homepages/blog-metro/

我已经尝试过并且能够像这样接近：https://jsfiddle.net/futu7t1c/

但是我怎样才能让底部的那 2 个small-thumbs 向上移动呢？

顺序是大、小、小、大、小、小

<div id="blog-posts">
<div class="grid big-thumb">
  Title
</div>
<div class="grid small-thumb">
  Title
</div>
<div class="grid small-thumb">
  Title
</div>
<div class="grid big-thumb">
  Title
</div>
<div class="grid small-thumb">
  Title
</div>
<div class="grid small-thumb">
  Title
</div>
</div>

css

#blog-posts {
      -moz-column-count: 1;
      -webkit-column-count: 1;
      column-count: 1;
      -moz-column-gap: 0em;
      -webkit-column-gap: 0em;
      column-gap: 0em;
    }

    .grid {
      background: #eee;
      float: left;
      position: relative;
      color: #fff;
    }

    .big-thumb {
      width: 50%;
      height: 600px;
      background: #aeaeae;
    }

    .small-thumb {
      width: 25%;
      height: 300px;
      background: #353535;
    }

Answer 1

要复制该网格，您可以创建具有 flex 子项的 flex 行，这些子项也是包含您的图像的 flex 列。

.flex {
  display: flex;
}
.col {
  flex-direction: column;
  flex: 0 0 50%;
}
img {
  max-width: 100%;
  vertical-align: top;
}

<div class="flex row">
  <div class="flex col">
    <div class="big">
      <img src="http://1.bp.blogspot.com/-hNC-oT6f-fY/TeXxO26yjvI/AAAAAAAAAOY/qfkOqdKkBi8/s1600/platon-photographer-putin-man-of-the-year-portrait.jpg">
    </div>
    <div class="flex row">
      <div class="small">
        <img src="https://i.stack.imgur.com/2C22p.jpg">
      </div>
      <div class="small">
        <img src="https://i.stack.imgur.com/2C22p.jpg">
      </div>
    </div>

  </div>
  <div class="flex col">
    <div class="flex row">
      <div class="small">
        <img src="https://i.stack.imgur.com/2C22p.jpg">
      </div>
      <div class="small">
        <img src="https://i.stack.imgur.com/2C22p.jpg">
      </div>
    </div>
    <div class="big">
      <img src="http://1.bp.blogspot.com/-hNC-oT6f-fY/TeXxO26yjvI/AAAAAAAAAOY/qfkOqdKkBi8/s1600/platon-photographer-putin-man-of-the-year-portrait.jpg">
    </div>
  </div>

嗯，这就是您使用常规 ol' html/css 的方式。但既然你只想拥有一堆这样自动布局的元素，请使用masonry

$('.masonry').masonry({
  itemSelector: '.item',
  columnWidth: '.small'
});

body {
  margin: 0;
}
.item {
  float: left;
}
.big {
  width: 50%;
}
.small {
  width: 25%;
}
img {
  width: 100%;
  vertical-align: top;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<div class="masonry">
  <div class="item big">
    <img src="http://1.bp.blogspot.com/-hNC-oT6f-fY/TeXxO26yjvI/AAAAAAAAAOY/qfkOqdKkBi8/s1600/platon-photographer-putin-man-of-the-year-portrait.jpg">
  </div>
  <div class="item small">
    <img src="https://i.stack.imgur.com/2C22p.jpg">
  </div>
  <div class="item small">
    <img src="https://i.stack.imgur.com/2C22p.jpg">
  </div>

  <div class="item big">
    <img src="http://1.bp.blogspot.com/-hNC-oT6f-fY/TeXxO26yjvI/AAAAAAAAAOY/qfkOqdKkBi8/s1600/platon-photographer-putin-man-of-the-year-portrait.jpg">
  </div>
  <div class="item small">
    <img src="https://i.stack.imgur.com/2C22p.jpg">
  </div>
  <div class="item small">
    <img src="https://i.stack.imgur.com/2C22p.jpg">
  </div>
</div>