How to create a perfect image grid with the same row height and variable widths and keeping the columns in a straight line?

Question

Im using Masanory to set an image grid. All my images have equal height but different widths. I need it to look like this : http://www.dreamstime.com/new-stock-photos-images . In there all the images have the same height and different widths but the two sides are in a straight line. How can I do this?

Here's my 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>

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


          });
      });
  });

Here's what I get :

Answer 1

This may not have existed when you asked your question, but I just achieved very nice results using https://github.com/naturalatlas/image-layout and its "Fixed Partition" solution. It works a lot like Masonry, gives you x, y, width, height values for each element in your grid. I used the calculation library layouts/fixed-partition.js and then set the position of my elements myself using the returned data.

Answer 2

You need to set image width, masonry doesn't resize your photos, it just reorganise them inside the container.

For example you can use percents, here's working pen

.item {
  width: 33.3%;
}

You can check other examples on masonry website

Answer 3

I would better use Bootstrap to solve this kind of problem. But i think here is a solution without it.

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