title: JavaScript and Bootstrap image gallery with different image sizes
body: <p>I have a problem aligning image gallery with images of different size. I do not want to put size programmatically, because on different screens they would not look nice. Another problem is whitespaces between images and a situation, that I do not know image sizes (images are obtained as a List of image, through Spring Framework controller and added by for-each cycle). My code is:</p>
  
  <pre><code> &lt;%@page contentType="text/html" pageEncoding="UTF-8"%&gt;
   &lt;%@page session="false"%&gt;
   &lt;%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%&gt;
   &lt;%@ taglib prefix="s" uri="http://java.sun.com/jsp/jstl/core" %&gt;
   &lt;%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %&gt;
   &lt;!DOCTYPE html&gt; 
   &lt;html&gt;
   &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
  &lt;title&gt;Who s the whale here? Im the whale&lt;/title&gt;
  &lt;link rel='stylesheet' href='webjars/bootstrap/3.2.0/css/bootstrap.min.css'&gt;
  &lt;style&gt;
      body {
          padding-top: 20px;
      }
  
      .navbar-default {
          background-color: rgba(255,255,255,0.88);;
          border-color: rgba(255,255,255,0.88);;
      } 
  &lt;/style&gt;
  &lt;sec:csrfMetaTags/&gt;
   &lt;/head&gt;
   &lt;body&gt;
   &lt;script type="text/javascript" src="webjars/jquery/2.1.1/jquery.min.js"&gt;        
    &lt;/script&gt;
    &lt;script type="text/javascript" src="webjars/bootstrap/3.2.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
     &lt;script type="text/javascript" src="webjars/masonry/3.1.5/masonry.pkgd.min.js"&gt;&lt;/script&gt;
    &lt;br&gt;
    &lt;br&gt;    
  
  
     &lt;c:if test="${!empty masterpieceList}"&gt;
      &lt;div class="container"&gt;
          &lt;ul class="row"&gt;
              &lt;c:forEach items="${masterpieceList}" var="masterpiece"&gt;
                  &lt;li class="col-md-3 col-sm-4 col-xs-6 wrapper"&gt;
                      &lt;img class="img-responsive imgClip"src="/something/getImg${masterpiece.masterpieceId}" /&gt;
                  &lt;/li&gt;
          &lt;/c:forEach&gt; 
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/c:if&gt;
  
  
     &lt;div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
     &lt;div class="modal-dialog"&gt;
      &lt;div class="modal-content"&gt;
          &lt;div class="modal-body"&gt;
          &lt;/div&gt;
      &lt;/div&gt;&lt;!-- /.modal-content --&gt;
     &lt;/div&gt;&lt;!-- /.modal-dialog --&gt;
   &lt;/div&gt;&lt;!-- /.modal --&gt;
    &lt;/body&gt;
     &lt;/html&gt;
  </code></pre>
  
  <p>And the gallery looks like: <img src="https://i.stack.imgur.com/cckR3.jpg" alt="enter image description here"></p>
  
  <p>Any ideas how to make it more smooth etc.? I tried different solutions, but because my images go through a cycle, they seem not to work properly. Thank you in advance</p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>It should look like this: 
  <img src="https://i.stack.imgur.com/ycTSh.jpg" alt="enter image description here"></p>