CSS砌体类型图像布局响应

Question

我需要创建一个响应式砌体图像布局，但有2个大的部分，这将使它非常棘手？

见附件图像：

我怎样才能得到类似的东西，但响应？

Answer 1

您可以尝试使用列来实现此目的。

HTML

<section id="photos"> 
    <img src="images/image-1.jpg" alt="Some Image"> 
    <img src="images/image-2.jpg" alt="Another Image"> 
    ... 
</section> 

CSS

#photos { 
    /* Prevent vertical gaps */ 
    line-height: 0; 
    -webkit-column-count: 3; 
    -webkit-column-gap: 10px; 
    -moz-column-count: 3; 
    -moz-column-gap:  10px; 
    column-count:   3; 
    column-gap:   10px; 
} 

#photos img { 
    /* Just in case there are inline attributes */ 
    width: 100% !important; 
    height: auto !important; 
} 

而一些媒体查询CSS

@media (max-width: 800px) { 
    #photos { 
    -moz-column-count: 2; 
    -webkit-column-count: 2; 
    column-count:   2; 
} 
} 
@media (max-width: 400px) { 
    #photos { 
    -moz-column-count: 1; 
    -webkit-column-count: 1; 
    column-count:   1; 
} 
} 

下面是这篇文章的详细信息Seamless Responsive Photo Grid

Answer 2

考虑使用像Bootstrap这样的框架。它是grid system使响应，基于列的布局易于创建。

虽然你必须为equal heights乱了一下。

这里的基本想法jsFiddle（尝试调整视口，看看它的表现在较低的分辨率）：

<div class="container"> 
    <div class="row"> 
     <div class="col-md-4"> 
      <div class="content">a</div> 
     </div> 
     <div class="col-md-4"> 
      <div class="content">a</div> 
     </div> 
     <div class="col-md-4"> 
      <div class="content">a</div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-md-4"> 
      <div class="content">a</div> 
     </div> 
     <div class="col-md-8"> 
      <div class="row"> 
       <div class="col-md-12"> 
        <div class="content">a</div> 
       </div> 
      </div> 
      <div class="row"> 
       <div class="col-md-6"> 
        <div class="content">a</div> 
       </div> 
       <div class="col-md-6"> 
        <div class="content">a</div> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div class="row"></div> 
</div>