Question

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

我尝试过并且能够尽可能接近：https://jsfiddle.net/futu7t1c/

但是如何让底部的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

要复制该网格，您可以制作具有弹性子项的弹性行，这些弹性子列也是保存图像的弹性列。

＆＃13;

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

＆＃13;

<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>

＆＃13;

嗯，这就是你如何使用普通的ol＆＃39; HTML / CSS。但是，既然你想拥有一堆像这样自动生成的元素，请使用masonry

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

地铁网格样式

1 个答案: