如何创建具有相同行高和可变宽度的完美图像网格并使列保持直线？

Question

我正在使用Masanory设置图像网格。我的所有图像都有相同的高度，但宽度不同。我需要它看起来像这样：Look at this JSFiddle。在那里，所有图像具有相同的高度和不同的宽度，但是两边是直线。我怎么能这样做？

这是我的html：

<div id="photos">
  <img class="item" src="../photo-164660.jpg" alt="Thumb 67556492 photo 164660">
  <img class="item" src="../photo-165523.jpg" alt="Thumb 82982186 photo 165523">
  <img class="item" src="../photo-65322.jpg" alt="Thumb 37340524 photo 65322">
  <img class="item" src="../photo-141502.jpg" alt="Thumb 85132138 photo 141502">
</div>

javascript：

  $(document).ready(function() {

      var container = document.querySelector('#photos');
      var msnry;
      // initialize Masonry after all images have loaded
      imagesLoaded(container, function() {
          msnry = new Masonry(container, {
              // options
              columnWidth: 10,
              resizable: true,
              itemSelector: '.item',
              layoutMode: 'fitRows'


          });
      });
  });

这是我得到的：

Answer 1

你需要设置图像宽度，砌体不会调整你的照片大小，它只是在容器内重组它们。

例如，您可以使用百分比here's working pen

.item {
  width: 33.3%;
}

您可以查看砌体网站上的其他示例

Answer 2

我最好使用Bootstrap来解决这类问题。但我认为这是一个没有它的解决方案。

display: -webkit-flex; /* Safari */
-webkit-justify-content: space-around; /* Safari 6.1+ */
display: flex;
justify-content: space-around;

Answer 3

当您提出问题时，这可能并不存在，但是我刚刚使用https://github.com/naturalatlas/image-layout及其“固定分区”解决方案取得了非常不错的结果。它的工作原理与Masonry相似，可为您的网格中的每个元素提供x，y，宽度，高度值。我使用了计算库layouts/fixed-partition.js，然后使用返回的数据自己设置了元素的位置。