如何在保持容器形状的同时，将包含不同尺寸图像的容器放在一起？

Question

我一直在为化妆师工作，我想制作如下图片布局：http://www.jasoncgriffin.com/photos/

我该怎么做呢？我已经谷歌搜索和研究了很多尝试得到的结果，但我已经解决了在图像本身顶部的背景图像。

Answer 1

(function ($) {
    'use strict';

	$(window).load(function(){

		$('.masonry').masonry({
			columnWidth: '.grid-sizer',
			gutter: '.gutter-sizer',
			itemSelector: '.item'
		});

	});
    
}(jQuery));

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: black;
}

@media (max-width: 480px) {
  .masonry {
    margin: 3% 0;
  }
  .masonry .grid-sizer {
    width: 48.5%;
  }
  .masonry .gutter-sizer {
    width: 3%;
  }
  .masonry .item {
    width: 48.5%;
    margin-bottom: 3%;
  }
  .masonry .item img {
    width: 100%;
  }
}
@media only screen and (max-width: xxspx) {
  .masonry {
    margin: 3% 0;
  }
  .masonry .grid-sizer {
    width: 48.5%;
  }
  .masonry .gutter-sizer {
    width: 3%;
  }
  .masonry .item {
    width: 48.5%;
    margin-bottom: 3%;
  }
  .masonry .item img {
    width: 100%;
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .masonry {
    margin: 2.25% 0;
  }
  .masonry .grid-sizer {
    width: 31.8333333333%;
  }
  .masonry .gutter-sizer {
    width: 2.25%;
  }
  .masonry .item {
    width: 31.8333333333%;
    margin-bottom: 2.25%;
  }
  .masonry .item img {
    width: 100%;
  }
}
@media (min-width: 768px) {
  .masonry {
    margin: 2% 0;
  }
  .masonry .grid-sizer {
    width: 23.5%;
  }
  .masonry .gutter-sizer {
    width: 2%;
  }
  .masonry .item {
    width: 23.5%;
    margin-bottom: 2%;
  }
  .masonry .item img {
    width: 100%;
  }
}
@media (min-width: 992px) {
  .masonry {
    margin: 1.875% 0;
  }
  .masonry .grid-sizer {
    width: 18.5%;
  }
  .masonry .gutter-sizer {
    width: 1.875%;
  }
  .masonry .item {
    width: 18.5%;
    margin-bottom: 1.875%;
  }
  .masonry .item img {
    width: 100%;
  }
}
@media (min-width: 1200px) {
  .masonry {
    margin: 1.8% 0;
  }
  .masonry .grid-sizer {
    width: 15.1666666667%;
  }
  .masonry .gutter-sizer {
    width: 1.8%;
  }
  .masonry .item {
    width: 15.1666666667%;
    margin-bottom: 1.8%;
  }
  .masonry .item img {
    width: 100%;
  }
}

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://masonry.desandro.com/masonry.pkgd.js"></script>

<div class="masonry">
  <div class="grid-sizer"></div>
  <div class="gutter-sizer"></div>
  <div class="item">
    <img src="http://placehold.it/200x170" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200x180" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200x190" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200x210" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200x170" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200x180" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200x190" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200x210" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200x170" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200x180" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200x190" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200x210" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200x170" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200x180" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200x190" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200x210" alt="" />
  </div>
</div>

检查here